- 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
Did I miss helping you with yours, @kjm0519? There are a lot of pages on this post so my apologies if I did.
- 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, 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
- 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
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.
- 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,
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...
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
No problem, @ApgFogp. With that theme add this to the header code field for your home page:
<style> .birdseye-header { display:none; } </style>
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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 !
- 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
@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!
- 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
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!
- 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
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>
- 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
Unfortunately, that code is not working for me 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
- 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 in the editor or on the live site? It usually doesn't do anything in the editor but works on the live site.
- 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 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? 😉
- 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, @Weebly_fan. I'm glad to help! And thanks for the "suggestion".
- 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 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
- 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 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!
- 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
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.
- 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 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>
- 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's working. Thanks a lot !
- 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
<style> .footer-wrap { display:none !important; } </style>
To remove menu bar for home page... ITS WORKING !
- 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,
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report