- 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
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
- 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
Also,some of the codes work when editing but when published it still shows.
- 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
@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>
- 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
Hmm... After adding the code, did you publish the 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
It worked!!! I don't know which one or what I did but it worked so I'm not messing with it lol. Thanks!!!
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
does not work. guys, how comes weebly is loosing on speed and simple things like accomodating for proper landing page structure.
- 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
Can you post a link to the page of your site where you want to hide your navigation, @Promining?
- 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
Playing with this a bit, but I have ran into an issue. Hoping someone might have suggestions.
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?
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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>
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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.
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Haha, you're welcome!
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@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.
- 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
@mandismusesThanks! Your extra coding helped me apply Adam's solution to my theme! 🙂
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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!
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
- 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 @AmyC! What's the address of the site you need help with? It's probably easiest if I can look at it.
- 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
With that theme you'll want to use this bit instead:
<style> #nav-wrap { 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
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
- 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
@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
- 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 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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report