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.

80,051 Views
Message 1 of 415
Report
414 REPLIES 414

Hello,

Please could you provide the bits of code needed to hide:

a) the logo and the menu

b) just the menu

on the following page: www.cpintl.org/testlandingpage

I have tried several code variations but without success.

Thanks so much.

3,424 Views
Message 367 of 415
Report

Hi @CPI. For just the navigation use this:

<style>
    #navigation
    {
        display: none !important;
    }
</style>

For both the navigation and logo, use this:

<style>
    #navigation, #header
    {
        display: none !important;
    }
</style>

3,419 Views
Message 367 of 415
Report

Thank you very much BJ. That worked perfectly.

3,411 Views
Message 367 of 415
Report

*sigh*

Hey gang,

I've been trying, REALLY TRYING,  to follow through all the help through these pages and figure this out for myself. Good to be self dependent, right?

However, everything I've tried doesn't seem to work for mine. 

Would anyone be able to help me figure out what the code I would need to hide the navigation bar for the following page? https://www.justlikethatauto.com/lp.html

If you can, thank you! I already love you. 

1,481 Views
Message 367 of 415
Report

Try using this code, @Jakey:

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

1,478 Views
Message 367 of 415
Report

I did it!

1,467 Views
Message 367 of 415
Report
Square

That's great, @2BUltra!

1,453 Views
Message 367 of 415
Report

Hello Adam,

my page is https://exangeloi.weebly.com/form.html

can you help me please? Smiley Happy

With the first code I can see my logo and it has a link to the website:

<style>

    .nav-wrap

    {

        display: none !important;

    }

</style>

With the second code is a weird blck space on the header like it's broken. 

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

Can I do something to make the image logo disappear and the space to be white?

1,329 Views
Message 367 of 415
Report

Try this code, @angeloskourepis:

<style>

.edison-header .container { visibility: hidden !important; }

</style>

1,323 Views
Message 367 of 415
Report

Hi Adam, 

I'm trying to hide the navigation on this page, but have only found a way to hide both navigation and logo. I'd like to keep the logo so it stays while folks scroll through the landing page.

mattprezioso.com/landingpage.html

This code worked, but it hid the logo as well -

<style>

.birdseye-header 

{

display: none !important;

}

.no-header-page .main-wrap

{

padding-top: 0px !important;

}

</style>

1,442 Views
Message 383 of 415
Report

Try this, @MattPrezioso:

<style>

.desktop-nav { display: none !important; }

</style>

1,443 Views
Message 383 of 415
Report

Thanks, @BJ ! That worked!

1,443 Views
Message 383 of 415
Report

its not working for me Smiley Sad

running out of code to try. still new at this but feel ive tried everything

https://watesnines.weebly.com/
1,446 Views
Message 383 of 415
Report

Hi, sorry if this has been answered already...

I have one page on my website that I want to send out as a link (it is a registration form).  Is it possible to remove the navigation from this page only?

Thank you.

1,300 Views
Message 383 of 415
Report

What is the URL of the page, @Condoleeza? I can figure that out for you.

1,296 Views
Message 383 of 415
Report

Hi, I have about 3 pages I want to remove the navigation and footer. Here is one of them: https://www.360impactgroup.com/otf-franchise-confirmation.html

Thanks so much!
1,296 Views
Message 383 of 415
Report

That page is a 404 for me, though I think those code should do it for you:

<style>

#navigation, #footer {

display: none !important;

}

</style>

1,294 Views
Message 383 of 415
Report

Hey there @BJ, if you're still in this thread really struggling with what to drop into the header code for this site to remove just the navigation elements, leaving the logo.

https://www.isaacravenmusic.com/commercial.html


Already tried #wsite-menu-default, #nav desktop-nav, maybe I'm just putting the code in wrong? Thanks so much for any assitance!!

1,230 Views
Message 383 of 415
Report

Try this instead @zatchmorinski:

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

1,226 Views
Message 383 of 415
Report

That did it, you're a wizard thank you!!

1,252 Views
Message 383 of 415
Report

Hi BJ,

Unfortunately all the codes are working. The navigation is still on the page after publishing the site.

I would like to remove the navigation on e.g. this page: https://www.madebyc-fotografie.nl/feedback-fotos.html

Could you please help me out?

Many thanks!

1,253 Views
Message 383 of 415
Report