Need help with hiding pages from main nav bar

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

Can you share your website URL?

30 minutes ago, Ziggy said:

Can you share your website URL?

this is my sister's site that I am working on, https://www.annazkennedy.com/

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>

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 

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>

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 

Strange as it works in my testing.