x
Square

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.

image

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".

image

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".

image

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>

image

After you've done that, re-publish your site and check it out!

image

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.

79,892 Views
Message 1 of 415
Report
414 REPLIES 414

Nice Tip Adam - more please!! 🙂

55,418 Views
Message 2 of 415
Report
Square


@NJRFTF wrote:

Nice Tip Adam - more please!! 🙂


Thanks! Smiley Very Happy

55,415 Views
Message 3 of 415
Report

Hey there! I'm learning a lot real fast, so please excuse if this is a very simple question, lol; Do you have to publish your site to see some changes or see certain links? The immediate reference I have is in regards to seeing how the coding changes effect your page, bu tI know I've had other situations where I felt like nothing would happen until I publish...is that the case?

31,451 Views
Message 10 of 415
Report
Square

@WBChartFish the code is pasted a couple pages back, but try adding this to the page you are trying to hide navigation on. You will need to go to pages>page name>seo>header

<style>
div.birdseye-header { display: none !important; }
</style>

Keep in mind this will not work in the editor. Once you publish you will see the update.

31,444 Views
Message 10 of 415
Report

Can anyone assist me in the coding needed to remove the header on this page I'm building out?

https://www.timelessskincarelaserclinic.com/springpromoformen.html

18,786 Views
Message 10 of 415
Report
Square

@Thatguyseran Hi! Smiley Happy Yes, some changes are only applied on the live site. 

31,442 Views
Message 10 of 415
Report

Aww, booo, lol. I am still figuring things out, so I really can't tell if some things work (such as trying to hide my navigation on the splash page). Are you able to hide a published page? Or perhaps unpublish soon after? If that is even a thing....

31,440 Views
Message 10 of 415
Report
Square

You can publish/unpublish at any time. Are you waiting to make your site go live until you are done editing? Maybe temporarily switching to a subdomain would be helpful. 

31,436 Views
Message 10 of 415
Report

ADAM CAN YOU HELP! IT IS NOT WORKING FOR ME. 

https://www.evansoroka.com/riseabovet1d.html

28,428 Views
Message 29 of 415
Report
Square

Try this instead, @esoroka:

<style>
	.birdseye-header
	{
		display: none !important;
	}
	.no-header-page .main-wrap
	{
		padding-top: 0px !important;
	}
</style>
13,745 Views
Message 29 of 415
Report

THANK YOU!!!!

5,536 Views
Message 29 of 415
Report

This was so helpful to creating the landing page I wanted with birdseye theme. Thank you!

4,942 Views
Message 29 of 415
Report

Hey Adam, 

having the same issues and could really use some help. Will this same method work on my page? Absolutely have to hide the navigation for this page as its a squeeze page / landing page for a facebook ad

Best, 

john

https://www.bigdaymedia.net/bigdaymedialandingpage.html

4,470 Views
Message 29 of 415
Report
Square

This code should get you what you need, @BigDayMedia10:

<style>
	.header-wrap
	{
		display: none !important;
	}
</style>
4,470 Views
Message 29 of 415
Report

Hi Adam,

I have tried this several ways, but it is not getting rid of the nav.  

The site I want help with is:

www.metrosdachurch.org/guests

Thanks for the help.

__________________________________

Disregard, please.  I kept trying code pieces you suggested to other people and finally found the correct one for mine.  So thankful for this thread.  Truly a live saver!  Much thanks!

3,614 Views
Message 29 of 415
Report

Hi Adam,

This works perfectly... but is there a way to get rid of the nav menu, but keep the logo? I tried the code you mentioned, but it took away the logo and my boss is all about branding.

Any ideas? Thanks.

Sadig

2,962 Views
Message 29 of 415
Report

Hi Adam, I am trying to hide my navigation bars on my website as well. https://www.elevatedaesthetics-ea.com/ad-lead-magnet-landing-page.html.
I have tried this, <style>
.w-navpane-trigger hamburger {display: none !important; }
<style>
but still can't get it to just hide the navigation bars. Could you help?
2,585 Views
Message 29 of 415
Report

Try this @Elisha_Allison_

<style>

.hamburger { display: none !important; }

</style>

2,581 Views
Message 29 of 415
Report

IT DOESN'T WORK FOR ME EITHER!!! Ughhhhhhh 

3,446 Views
Message 29 of 415
Report

Can you post a link to the page of your site that you want to hide your navigation on, @susi6?

2,571 Views
Message 29 of 415
Report