How to hide a navigation item for certain page

Hi. I have 2 navigation items and 2 pages. In each page, I have to hide one navigation item. How can I do this?

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

Can you share your website URL?

4 minutes ago, Ziggy said:

Can you share your website URL?

I didn't publish it yet and it's trial, still can share it?

You can add a site wide password and then share your URL and the password:

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

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! 

Just now, buura said:

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

No problem! Can you mark my post as the solution and give it a thumbs up? Thanks!

Can I create a different navigation on a password-protected area of my website?

On 4/3/2023 at 3:03 AM, MDS said:

Can I create a different navigation on a password-protected area of my website?

Yes. Possible. But you will need to add code manually to all password protected page.

What is your site url?

On 4/4/2023 at 10:02 PM, tuanphan said:

Yes. Possible. But you will need to add code manually to all password protected page.

What is your site url?

mlpha.org is the site address. I'm setting up an interactive, password-protected page for a location-only experience. Once on the private page, the public navigation is not applicable so a separate navigation or no navigation would be better. 

On 11/24/2022 at 8:00 AM, Ziggy said:

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

Hi,

Where was this code added? Was it in custom CSS or header code on individual page? Thanks!

On 7/12/2024 at 4:40 AM, crisherrera said:

Hi,

Where was this code added? Was it in custom CSS or header code on individual page? Thanks!

It is Header Injection on Individual Page