How can I hide the navigation bar on only the homepage?

I’m using the Five template. I’d like to hide the navbar on the opening page (splash page) only while keeping it visible with text and background image on all the site’s other pages.

I’ve tried adding certain adjusting the CSS in the style editor:

.collection-506daf5a84aead5098d68b94 #nav-bar {display: none}

And in the advanced section of the Page Settings, I’ve tried an injection code:

<style>
 #header {
   visibility: hidden;
 }
</style>

But nothing has happened. The ID is correct and at this point I’m lost.

Any ideas out there? I’m grateful for your help.

Try this CSS in the style editor:

body.homepage #navigation-top {
 display: none !important;
}

Hey Subpar,

Excuse the site, it's in its infancy and the client doesn't have amazing taste. It's a trial site that we'll be turning into a full site shortly. You can use the visitor's access.

marlin-potash.squarespace.com

Thanks a million. Really appreciate the help.

No problem, there's no accounting for client taste :)

If you just want to hide just the navigation links, this custom CSS should do the trick:

body.homepage #navigation-bottom {
 display: none !important;
}

If you want to hide the whole of the header section, then this CSS is what you need:

body.homepage #page-header-wrapper {
 display: none !important;
}

You're a gift from the Gods!

It worked! Thank you! Thank you! Thank you!

All the best to you and yours . . . .

My solution was examine the source code from the page and look up the IDs or classes on the elements I wanted to hide, and replace the #navigation-top with them.

Hope it helped a little.

Rigato, your advice was spot on for my site, thank you very much.

I am using the Atelier template and I needed to remove the navigation from my splash page so I replaced "#navigation-top" for "#headerWrapper".

Hi guys @subpar,Im sorry but im super new at this. I want to do the same and thank you for the code, but WHERE do i put this code?Essentially i want the landing page to have just a background video with my logo and a button that says 'Enter'. Then you click on the 'Enter' button and from there the site is simple with same navigation bar on each page etc.Is this possible?When you say 'use this CSS', paste it where? Again apologies for beginner idiocy! :)