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,061 Views
Message 1 of 415
Report
414 REPLIES 414

This code should hide that for you @madebycNL:

<style>
    .menu {
        display: none !important;
    }
</style>

2,172 Views
Message 383 of 415
Report

Thnx BJ! Do you also have a code I could use to hide it on mobile device?
2,171 Views
Message 383 of 415
Report

Hi guys, I tried, really I did, but this is just stretching what I'm capable of. I don't really understand, and I'm freaked out I'm going to break something.

Here's the page I want to remove the navigation from... can someone please help?

www.meganwords.com/freeguide

3,565 Views
Message 383 of 415
Report
Square

Hi there. It looks like the theme is Oasis. I would search this thread for a code specifically for Oasis. If you add the code to Settings>SEO>Header, you will not have to worry about messing up the code. The nice thing about adding to settings is that you can easily remove the code if you need to troubleshoot. Smiley Happy

3,564 Views
Message 383 of 415
Report

Hi there

i have tried multiple codes but i just can't seem to get this to work. 

The page i am trying to remove the navigation from is https://uisolutions.weebly.com/#

Is there anyone that wouldn't mind helping please? 

3,575 Views
Message 388 of 415
Report

the page is now www.uis.org.uk

3,573 Views
Message 388 of 415
Report

 
3,628 Views
Message 389 of 415
Report

As with everyone else, I'm trying to do the same and hide the navigation on a single page. 
Can't determine what theme I have, so I can't figure out which code to use. (tried some to no avail, but I presume it's cause I haven't id the theme) 

www.peterkellymedia.com

3,599 Views
Message 389 of 415
Report

Could you please help me get the nav bar out of my splash page? 

thehappyfitstest.weebly.com

3,564 Views
Message 391 of 415
Report

Seriously, this was a great post. It took a bit of trial and error until I discovered the code I was looking for. In my case, it was nav-wrap-repeat. But I got it. Landing page for Newsletter is set!

I wish Weebly would make this easier... and I wish they'd let us set pixel sizes on images...

But anyway, thanks!

3,548 Views
Message 395 of 415
Report

Hi Adam!

Hoping you can help me. https://mooringsgalore.weebly.com/ is my site, and I'm trying to hide just the menu bar but keep the logo. I followed the tutorial but it didn't get me to the right place. Any ideas?

Thanks.

3,532 Views
Message 395 of 415
Report

Try this code instead:

<style>

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

</style>

3,528 Views
Message 395 of 415
Report

Hi Adam, 

I dont see the "Advanced" option. My weebly editor is the light grey not the dark grey like the one ypu have in your pictures. Also I've tried the embed code section and its not working either. Can you please help me.

Thanks 

3,719 Views
Message 395 of 415
Report

Struggling a little bit with this. I've managed to successfully hide the navbar and the footer content, but the footer now contains a white margin that I just can't seem to get rid of. Any help? Website can be found at https://www.evolveandbestrong.co.uk/

TIA.

3,718 Views
Message 395 of 415
Report

I tried using the code to remove my navigation/header but it didn't seem to work. Any ideas on what I did wrong? 

http://www.adventuresportu.com/bicycle-touring.html

Thanks,

Reggie

3,691 Views
Message 395 of 415
Report

That page is giving me a 404, but something like this should work:

<style>

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

</style>

3,688 Views
Message 395 of 415
Report

Hey Adam,

Really well written instructions, loved the new 'inspect' feature and how well you outlined the step. 

I'm working on a free page at the moment and in the page details, I don't seem to have an 'advanced' button. I do have a SEO settings, which appears to be layed out exactly the same as what you have screen shot...

Is that advanced tab hiding because I'm on 'free' or has it been renamed to 'SEO settings' or am I looking in the wrong spot? 

Thanks again.

Joseph

3,637 Views
Message 398 of 415
Report
Square

Hi Joseph. This is an older article, but I believe you would click on the page name, then SEO to access the header area for the specific page. 

3,634 Views
Message 398 of 415
Report

Hello Adam,

on my site https://lionblu.weebly.com

I would like to delete the navigation menu and also the white bar at the top, the guide does not work for me, what can I do? THANK YOU!

3,623 Views
Message 398 of 415
Report

I follow this up until I click on the page I'm trying to edit.  I can't find the "Advanced" button/tab/option anywhere?   I'm familiar with the "Build" option.  Is it buried in there?

3,568 Views
Message 404 of 415
Report
Square

Go to the Pages tab @johnnutt, click on a page, then click on SEO Settings and you'll find the header code field there.

3,566 Views
Message 404 of 415
Report