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

Did I miss helping you with yours, @kjm0519? There are a lot of pages on this post so my apologies if I did.

4,137 Views
Message 67 of 415
Report

Hi Adam, I'm also new to coding and have tried all of the methods above - but no luck.

I am trying to remove the header and footer of www.pantheradesigns.com/splash to create a splash page but nothing has worked so far, could you please help?

My theme is Nectur - PurpleHaze

Many thanks in advance and keep up the great work!

- Anisa

3,900 Views
Message 67 of 415
Report
Square

Hey @pantheradesigns! That theme is a little odd, so it will take a little more to make it look like that. Add this to that page's header code field:

<style>
body.has-header
{
padding-top: 0px !important;
}
div#header, .footer-wrap
{
display: none !important;
}
</style>

If there's still a white bar at the top, try changing the page type to "no-header" and reuploading your background image to the main section for the page.

3,864 Views
Message 67 of 415
Report

Hi Adam, 

Thank you so much for your post, your work is incredibly useful especially to people like me, totally new to the "website world"...I work for an NGO and we want to use weebly to build our website but I really want to hide the navigation on my splash page. I tried your coding and it worked for some themes but not with the one we want to use. I tried many coding versions (using the "inspect" google option, etc.) but nothing seems to work. Your knowledge and experience is my last resort. I am very sorry to ask for your time but if you have a minute to help me, it would be GREATLY appreciated !!! The website I am working on is : http://amisparctest.weebly.com/. Thank you so much, I know nothing about coding (I wish), I feel so helpless...

18,034 Views
Message 67 of 415
Report
Square

No problem, @ApgFogp.  With that theme add this to the header code field for your home page:

<style>
	.birdseye-header { display:none; }
</style>
18,205 Views
Message 68 of 415
Report

It works, it works, it works, you've just made my day, you have no idea !!!! We were just about to switch to WIX, I am so happy we can stay with weebly now ! Thank you again so much, your tips and knowledge are soooo useful and appreciated !

18,046 Views
Message 69 of 415
Report
Square


@ApgFogp wrote:

It works, it works, it works, you've just made my day, you have no idea !!!! We were just about to switch to WIX, I am so happy we can stay with weebly now ! Thank you again so much, your tips and knowledge are soooo useful and appreciated !


Aww, thanks!

17,970 Views
Message 70 of 415
Report

Hi i got the same problem and when I tried the code it did not work. Can you help me or give me some advise? Also I am a first time coder so I am not really sure about the code that I entered if its in the right order.
4,458 Views
Message 72 of 415
Report

I'm in the same boat as everyone else on this thread. I want to remove the white bar at the top of my page, but don't have any coding experience. This is the site I'm working on: http://wilderwisehomes.weebly.com

How can I remove the navigation bar? Thank you!

3,606 Views
Message 76 of 415
Report
Square

Add this to the header code field for any page of your site where you want to hide the navigation:

<style>
.dusk-header { display: none !important; }
.site-canvas { padding-top: 0px !important; }
</style>
3,599 Views
Message 76 of 415
Report

Unfortunately, that code is not working for me Smiley Sad I've tried adding to both the header.html and the noheader.html, in various places within the existing code, but nothing changes. Is there something more specific I need to be paying attention to? Please help! Thank you!!

-Arya

3,581 Views
Message 76 of 415
Report
Square

Is this in the editor or on the live site? It usually doesn't do anything in the editor but works on the live site.

3,563 Views
Message 76 of 415
Report

Thank you so much, Adam! This was a huge help. It made something I thought was going to take a long time only take a few minutes with the exact desired results I was looking for!!!

As a suggestion to Weebly, I believe the "Landing Page" in all themes should remove the navigation so that it looks like a true "Landing Page". My opinion, but this seems to be shared by many.

In any case, thanks again for making it easy for me to stay with Weebly and make my own landing page. 🙂

Nicole

P.S. I've noticed others stayed with Weebly because of your advice here - perhaps you should ask for a raise? 😉

18,085 Views
Message 76 of 415
Report
Square

Thanks, @Weebly_fan. I'm glad to help!  And thanks for the "suggestion". Smiley Wink

18,098 Views
Message 77 of 415
Report

I agree, Adam. You do deserve a raise! I was thinking I had outgrown Weebly and was seriously considering WP. EEK! Not now.

Meanwhile, I tried your advice about adding

, #logo

On this page:

http://www.amychanel.com/landingpagetest.html

The code now looks like this:

<style>
#nav-wrap, #logo { display:none; }
</style>

But that page still shows nav menus. Any suggestions?

Thanks a million!

Amy

Tags (1)
18,143 Views
Message 78 of 415
Report

This is great! I was able to hide the top menu of my opt-in page.

But I can't hide de footer even if I put the the child element too...

I am using the Purple Haze template. Is it possible some of them don't work?

http://www.nadynebienvenue.com/libre

I've tried:

<style>
#site-footer container { display:none; } </style>

 #site-menus { display:none; }

and 

#wsite-menus

none of them worked. Thoughts, anyone?

thanks!

12,179 Views
Message 79 of 415
Report

Unfortunately every time we find a way to hide the footer on a page, say the contact us page or the main page that we want clean and good looking, Weebly finds a way to kill it, because they want that footer on there or they want their money. I don't understand why they can't let us CHOOSE where the footer goes. I'd have no problem with a footer on my links page, or the "About Me" pages or something. I just want to hide it on a certain page or two. Or do an ala carte option to get rid of it for like $2 per month per site or something. It's so ugly.

12,146 Views
Message 80 of 415
Report

I don't think Weebly cares if you hide or remove the footer as long as your site is upgraded. Try this @phonzyne:

<style>
        .footer-wrap { display:none !important; }
</style>
13,192 Views
Message 81 of 415
Report

It's working. Thanks a lot !

12,784 Views
Message 82 of 415
Report

<style>
        .footer-wrap { display:none !important; }
</style>

To remove menu bar for home page...  ITS WORKING !

5,238 Views
Message 84 of 415
Report

Hi Adam,

I wonder, if it would be possible just hide some elements of the navigation bar, but not all of them. And at the same time, show other items in the navigation bar that were hidden.

In your example: hide "contact" in the navigation bar, but to show "contacto" instead.

What I pretend is to substitute all the English items in the navigation bar by the same ones but in Spanish. The Spanish ones were hidden.

Thanks for the tip. It was very well explained. Jose

9,452 Views
Message 84 of 415
Report