Jump to content

Need help with hiding pages from main nav bar

Recommended Posts

I need assistance in adding custom CSS code to my Squarespace website to hide specific pages from the main navigation menu. I want to ensure that when visitors are on the 'Photography' section of the website, they see only photography-related items in the main navigation bar. Similarly, when they're in the 'Artwork' section, they should only see artwork-related items.

I have a Commerce plan, which allows me to add advanced CSS. On my homepage, I've already implemented code to hide the navigation bar, and I'd like to maintain that.

My website provides two options: one for the 'Photography' page and the other for the 'Artwork' page. Here's what I want to achieve:

On the 'Artwork' page, I want to display only 'the Artist,' 'ArtworkFAQ,' 'Shop' (which is a folder containing three different shops), and 'Contact.'

On the 'Photography' page, I want to display only 'photographyFAQ,' 'the Artist,' 'Investment,' and 'Contact.'

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

For the Art pages you can use this code in the page Header Code Injection:

<style>
  // hide photography faqs
  .header-menu-nav-item a[href="/photography-faqs"] {display:none;}
  // hide investment
  .header-menu-nav-item a[href="/investment"] {display:none;}
</style>

On the Photography pages use this:

<style>
  // hide shop
  .header-menu-nav-item a[href="/shop"] {display:none;}
  // hide artwork faq
  .header-menu-nav-item a[href="/artwork-faqs"] {display:none;}
</style>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 hours ago, Ziggy said:

For the Art pages you can use this code in the page Header Code Injection:

<style>
  // hide photography faqs
  .header-menu-nav-item a[href="/photography-faqs"] {display:none;}
  // hide investment
  .header-menu-nav-item a[href="/investment"] {display:none;}
</style>

On the Photography pages use this:

<style>
  // hide shop
  .header-menu-nav-item a[href="/shop"] {display:none;}
  // hide artwork faq
  .header-menu-nav-item a[href="/artwork-faqs"] {display:none;}
</style>

Sadly it's a negative boss, I do not understand why it's not working as it should... but is not 

code.jpg

code2.jpg

Link to comment

Try without the "a":

For the Art pages you can use this code in the page Header Code Injection:

<style>
  // hide photography faqs
  .header-menu-nav-item [href="/photography-faqs"] {display:none;}
  // hide investment
  .header-menu-nav-item [href="/investment"] {display:none;}
</style>

On the Photography pages use this:

<style>
  // hide shop
  .header-menu-nav-item [href="/shop"] {display:none;}
  // hide artwork faq
  .header-menu-nav-item [href="/artwork-faqs"] {display:none;}
</style>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

Try without the "a":

For the Art pages you can use this code in the page Header Code Injection:

<style>
  // hide photography faqs
  .header-menu-nav-item [href="/photography-faqs"] {display:none;}
  // hide investment
  .header-menu-nav-item [href="/investment"] {display:none;}
</style>

On the Photography pages use this:

<style>
  // hide shop
  .header-menu-nav-item [href="/shop"] {display:none;}
  // hide artwork faq
  .header-menu-nav-item [href="/artwork-faqs"] {display:none;}
</style>

still the same thing 

code4.jpg

code5.jpg

Link to comment

Strange as it works in my testing.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.