- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hide Your Navigation on a Single Page (Without Customizing Your Theme)
Say you have a really nice splash page, but you want to hide your navigation on that page so users are directed to a specific page of your site first after visiting it. If you're familiar with CSS you can do this easily, and thanks to how CSS works you can do this without customizing your theme itself.
In this example, I've used Saucy as the theme for a site selling oranges. I chose the Splash page layout for the page, and now I really only want the front page to be the site name, slogan, and a button that sends people to a special deals page first.
This looks great, but I'd really like to hide the navigation so that the first page visitors go to has current special deals. The first step is to publish the site. Modern browsers like Chrome and Safari come with an extremely handy tool called the Web Inspector. There are many powerful things you can do with this, though in this example we only need to get the class or ID of the element containing the navigation. Right-click or CTRL-click on your navigation, then choose "Inspect".
A window will pop up, and the element you right-clicked on will be selected within the code displayed. Mouse over parent elements until you get the element that contains all of your site navigation. Web Inspector makes this really handy because it will highlight the element on the page. You can see in my screenshot that the element I want to hide has an ID of "header-wrap".
Great! We're now two thirds of the way done. Next, go back to the editor and go to the Pages tab. Select your home page, then click on "Advanced". In the Header Code field, enter this code:
<style> #header-wrap { display:none; } </style>
After you've done that, re-publish your site and check it out!
Congrats! You've hidden the navigation on a single page of your site, and you're still using a standard theme. What if you're using a different theme and this hides your logo? Go back to web inspector, and look into child elements until you find the element that only contains your navigation. Are you using one of our themes that has a hamburger icon all the time? The same principle applies- use Web Inspector to find the element that has just the icon, and use that ID or class with the same CSS rule above.
As you can see, each theme is different so what you're going to be hiding will vary from one theme to another, however the basic concept is the same. Remember, you should be comfortable working with CSS as we don't provide assistance with custom CSS and HTML changes. If you have any trouble, just delete the code from the Header Code field and start over.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
yes, this is a new page im creating with my customized theme. i have placed this page as the first page and set hide in navigation, and the next page is my store page. i cannot change the permalink URL as recommended by
i added the pictures i wanted and added other element, so i just need to remove the navigation bar from the page, and also when my customer choose "continue shopping" on the check out page it will go to the store page instead of this landing page.
my website is www.kikikoorganics.com
i added BJ's suggestion to add the following under the footer & header code
<style>
.dusk-header, .footer-wrap
{
display: none !important;
}
</style>
now on my landing page, there is no footer, but the navigation bar is still at the side.
i tried also JT recommendation to add the following to the header code
<style>
#header
{
display: none !important;
}
</style>
but the navigation bar is still there.
thank you and appreciate all your help and advice.
Sharon
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Try this code instead, @SA36:
<style>
.header, .footer-wrap
{
display: none !important;
}
.wrapper
{
padding-left: 0px !important;
}
</style>
That'll hide the things you need. There isn't a way to change where the continue shopping link goes, though.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Thank you BJ!
That worked like a charm!
Part of my top image is cropped out, can adjustment be done to display the full image? if so, appreciate if you could advice me.
Once again, BJ thank you for your help.
Sharon
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
No prob! Is that a header section? Try adding a spacer to make it taller; that might be the simplest solution.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hello, I am trying everything to remove the navigation on my page. I am using the "Paper - Online Store" theme, please help!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi @nat_n I'm sure the code for the Paper theme is somewhere on this thread. I know a few of them are pretty similar and just swap the theme name:
<style>
.birdseye-header
{
display: none !important;
}
</style>
I'm not sure if that theme will work if you use "paper" instead of "birdseye" but it's worth a shot trying! If it doesn't work, I'm sure a code-helper will see the thread within the next few days.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Hi Adam, Would you be able to take a look at these pages:
https://www.cherryjeffs.com/cherryjeffs/instagrambio.html
https://www.cherryjeffs.com/cherryjeffs/paperdolls
The footer code worked on the first and not the second and yet it's the exact same code...
I haven't managed to hide the header on either page!
Since these pages are aimed at mobile users, I don't mind too much if I can't hide the header as the nav turns into the ☰ menu anyway so it's not so intrusive, but I really want to lose the footer.
That said, if you can tell me how to lose the header that would be great because I have some other landing pages in mind that won't be primarily mobile.
Thanks in advance!
Cherry
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Try this code, @WildC, it should hide both on the published site:
<style>
.header-wrap, #footer-wrap
{
display: none !important;
}
</style>
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Thanks BJ.
Very weirdly, it works for https://www.cherryjeffs.com/cherryjeffs/paperdolls
but for https://www.cherryjeffs.com/cherryjeffs/instagrambio.html - it hides the whole page!
The only difference between the two pages is that the second is that instagrambio.html is hidden from search engines...
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Is this the page where it isn't working? https://www.cherryjeffs.com/cherryjeffsinstagrambio.html
That page loads good for me.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
What is the address of your site, @jab? I can figure out something for you.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
I'd like some support on hiding the naviagation on my page too. Tried all the tricks and can't seem to get it.
I've tried #nav-wrap and #menu and it wont disappear.
www.heartandhealthacu.com/instagram.html
Thanks!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
It looks like nav-wrap is a class and not and ID with that theme. Try this code instead:
<style>
.nav-wrap
{
display:none !important;
}
</style>
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Can you help me out with my website?
I was able to get rid of the navigational button, but unable to get rid of the grey bar associated with the header.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
This should get you what you need @codycordova:
<style>
.no-header-page #main
{
padding-top: 0px !important;
}
</style>
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
You are the bestest ever. ❤️
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Aww, thanks!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Good day...
I am using the older Weebly theme called Bradley... and I have tried multiple variations of
<style> #header-wrap { display:none; } </style>
and nothing has worked... when I choose inspect this is my code
I was able to find the header code in the CSS... but it removed the header navigation from my entire site.
Thank you in advance!
J
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
You want to use this code in the Header Code field for just the page you want to hide it on, @ENJENgrowth:
<style>
#header
{
display: none !important;
}
</style>
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
It still isn't working. It works while editing but after I publish it's back up. Am I not saving it right or something?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report