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

Hi, did you get the reply with the link? It's www.susiphotography.com and the page in particular is https://www.susiphotography.com/30a-beach-weddings.html

Tags (2)
4,095 Views
Message 29 of 415
Report

Also,some of the codes work when editing but when published it still shows. 

imageimage

3,891 Views
Message 29 of 415
Report

@susi6, to hide the navigation and logo use this:

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

Otherwise to hide just the navigation but leave the logo use this:

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

3,706 Views
Message 29 of 415
Report

Hmm...  After adding the code, did you publish the site?

3,703 Views
Message 29 of 415
Report

It worked!!! I don't know which one or what I did but it worked so I'm not messing with it lol. Thanks!!!

Tags (1)
3,702 Views
Message 29 of 415
Report

does not work. guys, how comes weebly is loosing on speed and simple things like accomodating for proper landing page structure. 

3,056 Views
Message 29 of 415
Report
Square

Can you post a link to the page of your site where you want to hide your navigation, @Promining?

3,054 Views
Message 29 of 415
Report

Playing with this a bit, but I have ran into an issue. Hoping someone might have suggestions. Smiley Happy

One page on the site, I'd like no menu, no comment element, and no footer. 

So coding, I did -

<style>
ul.wsite-menu-default { display:none; }
</style>

<style>
div.blog-comment-area { display:none; }
</style>

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

<style>
div.blog-comments-bottom { display:none; }
</style>

It worked. But I can't figure out how to remove the 0 comments on the top part in the blog header.

Here's the page- http://www.mandismuses.net/newsletters

Thoughts?

32,787 Views
Message 29 of 415
Report


mandismuses wrote: 

It worked. But I can't figure out how to remove the 0 comments on the top part in the blog header.

Here's the page- http://www.mandismuses.net/newsletters

Thoughts?


Try adding this:

<style>
p.blog-comments { display:none; }
</style>
32,777 Views
Message 30 of 415
Report

You are amazing, thank you!!!! Virtual cookies being sent!
That worked, I can now generate the HTML newsletter without any of the extra random links. Smiley Happy

31,632 Views
Message 31 of 415
Report
Square

Haha, you're welcome!

31,620 Views
Message 32 of 415
Report

@mandismuses Where did you do put the

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

code? I tried it in the Header and Footer, and neither worked for me.

16,497 Views
Message 34 of 415
Report

@mandismusesThanks!  Your extra coding helped me apply Adam's solution to my theme! 🙂

14,585 Views
Message 36 of 415
Report

You're very welcome! I hated having to build a newsletter from scratch every time. So there was an option to use an HTML version, and when I tried it all the links were added to it. So this helped me make a page where no extra links were there. Exactly what I needed! Smiley Happy

Tags (1)
14,321 Views
Message 36 of 415
Report

Adam,

Meanwhile... You are a genius! It worked like a charm on a new site I am working on and I am thrilled!

However, on my older site. I am wondering if you can help with an older template I am using. I cannot recall the template name, but I do the control click and get this:

<div id="header-wrap" class="wsite-background wsite-custom-background">
<div id="logo" class="container"><span class="wsite-logo">

etc

Any ideas?

A MILLION Thanks for that!

A

24,301 Views
Message 36 of 415
Report
Square

Hey @AmyC!  What's the address of the site you need help with? It's probably easiest if I can look at it.

23,967 Views
Message 37 of 415
Report

Yay Adam!

www.amychanel.com

check out amychanel.com/join

to see that the menu tabs are present.

A

22,080 Views
Message 38 of 415
Report
Square

With that theme you'll want to use this bit instead:

<style>
	#nav-wrap { display:none; }
</style>
21,309 Views
Message 39 of 415
Report

Thanks Adam!!!!

IT WORKS IT WORKS!!!! You are a GOD!

Just wondering, though, why it works here: 

http://www.amychanel.com/facebook-splash.html

But not here:

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

One more thing that I am wondering if you have an idea about. I am looking at my site on mobile and it really doesn't look very good. Is there a theme that is he best at looking great on mobile or do I need to actually find someone to alter the html or whatever? 

Thanks again. You rock! Bless you.

A

Tags (1)
21,299 Views
Message 40 of 415
Report
Square


@AmyC wrote:

Thanks Adam!!!!

IT WORKS IT WORKS!!!! You are a GOD!

Just wondering, though, why it works here: 

http://www.amychanel.com/facebook-splash.html

But not here:

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

One more thing that I am wondering if you have an idea about. I am looking at my site on mobile and it really doesn't look very good. Is there a theme that is he best at looking great on mobile or do I need to actually find someone to alter the html or whatever? 

Thanks again. You rock! Bless you.

A


Since they're different page types the code is a little different (looks like the logo element is separate). After "#nav-wrap" in your code, add this including the comma:

, #logo
19,629 Views
Message 41 of 415
Report

Hi Adam, 

I am trying to create a landing page in weebly using Unite 2. 

I want a Coming Soon title followed by a couple of text paragraphs and a newsletter form (which btw I managed to edit to white now...huge strughgle though).

However, I do not want to see neither the navigation bar nor the huge blank space that appears when I scrolled down in the mobile preview.

It is quite important for me that the logo shows up in the left corner.

Not using the Code Editor as I do not want to customize the theme. Instead, I am using the SEO code for that page only, as follows:

<style>

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

</style>

<style>
.wsite-form-label, .wsite-form-input, .wsite-search-element-input, .form-select,
.wsite-form-field select, .wsite-com-product-option-groups select, .form-radio-container,
#wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label
input[type='radio'], input[type='checkbox']
{
color: #fff !important;
}
.wsite-form-input, #form-773559558505292624 > div > .wsite-button, .form-select, .wsite-form-field select,
.form-select:hover, .wsite-form-field select:hover
{
border: 1px solid #fff !important;
color: #fff !important;
}
</style>

Could you please help me with this?

Thank you so much in advance

2,884 Views
Message 54 of 415
Report