Jump to content

How to hide a navigation item for certain page

Go to solution Solved by Ziggy,

Recommended Posts

<style>
.header-nav [href="/contact"] {
    display: none;
}
.burger-box {
    visibility: hidden;
}
</style>

 

with this code, I made it happen. But this time, some spaces appeared in hidden items. how can I remove that spaces? Its disturbing because there is also two more nav item and I can see that spaces between them.

Link to comment
  • Solution

Yes, that extra space is irritating! Your current method, although better in many ways to just target the link HREF, I can't seem to work that to hide the entire space, this may work better at hiding the space, using :nth-child(2) and :nth-child(3) to hide the 2nd and 3rd like this:

<style>
.header-nav-item:nth-child(2) {
      display: none;
  }
</style>

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
13 minutes ago, Ziggy said:

Yes, that extra space is irritating! Your current method, although better in many ways to just target the link HREF, I can't seem to work that to hide the entire space, this may work better at hiding the space, using :nth-child(2) and :nth-child(3) to hide the 2nd and 3rd like this:

<style>
.header-nav-item:nth-child(2) {
      display: none;
  }
</style>

 

Ziggy, thank you very much. This one is perfect! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.