Jump to content

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

Recommended Posts

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:

 #header {
   visibility: hidden;

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.

Link to comment
  • Replies 7
  • Views 35.4k
  • Created
  • Last Reply

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.


Thanks a million. Really appreciate the help.

Link to comment

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;

Web and mobile developer.

Link to comment
  • 6 months later...
  • 3 months later...

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".

Link to comment
  • 2 years later...

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! :)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.