Jump to content

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

Recommended Posts

Posted

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.

  • Replies 7
  • Views 35.8k
  • Created
  • Last Reply
Posted

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.

Posted

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.

Posted

You're a gift from the Gods!

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

All the best to you and yours . . . .

  • 6 months later...
Posted

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.

  • 3 months later...
Posted

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

  • 2 years later...
Posted

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

Archived

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.