Display none single nav item

I need! to hide one nav item and show another nav item on a single page. I think it is the easiest way in the costum css to hide this specific menu item and then show it again in the header on the specific page. 

Custom CSS:

.header-nav-folder-title {
  display: none!important;
 }     

Header on specific site:

.header-nav-folder-title {
  display: block!important;
 }     

But now this affects all (folder) items. But I want to hide a specific one. But there is no ID for that. Does anyone have an idea? Of corse i could add a the nav item and hide in every site header. but this is actually a really bad solution...

Thank you!!

Hi, since you didn't share your website url, there was no way to know which nav item you are trying to hide. Also it's not clear from your post whether you want to a hide nav item under a folder or from the main nav items list. 

Let's assume you want to hide the second nav item from the nav folder on all pages and display it on a specific page. Here's the code for that:

First add this code under custom css:

.header-nav-folder-content .header-nav-folder-item:nth-child(2) {
  display: none !important;
}

Then add this code under the advanced of the specific page:

<style>
.header-nav-folder-content .header-nav-folder-item:nth-child(2) {
  display: block !important;
}  
</style>

If you want to hide a nav item from the main nav list (not from the folder):

Let's assume you want to hide the second nav item on all pages and display it on a specific page. Here's the code for that:

First add this code under custom css:

.header-nav-item:nth-child(2) {
    display: none !important;
}

Then add this code under the advanced of the specific page:

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

We can also do this using the collection page id of your page. However, I would need to see your website for that. Thanks!

Dear Lesum

ashes on my head. i thought i had attached the website. SORRY! And of course 7.1

https://calliope-sponge-9whf.squarespace.com/
pw: spezitestpage

I want to remove the first two complete link folders. 

With the pseudoselector I have already tried, according to: 
remove-a-link-from-your-main-nav

And also with your code the hiding did not work. have tried all variants. the pseudoselector does not work with a folder? 

Hi, Thanks for clarifying! Previous code was to hide only one nav item, not the entire nav folder.

Here's the code to hide just the nav folder. 

<style>
  .header-nav-folder-content {
    display: none !important;
  }
</style>

If you want to hide nav item title along with the nav folder, here's the code for that:

<style>
  .header-nav .header-nav-item--folder {
    display: none !important;
  }
</style>  

Add the code on the specific page where you want to hide. Thanks! 

Glad to be able to help. If you want to directly add the code on custom css tab, here's a solution:

<style>
	#collection-64cf8bc7df45a258455e0b67 .header-nav .header-nav-item--folder:nth-child(1), #collection-64cf8bc7df45a258455e0b67 .header-nav .header-nav-item--folder:nth-child(2) {
    display: none !important;
}
</style>

Sometimes when css is added under the advanced tab, it loads slowly and causes issues. Ideally all css should be added under custom css for fast loading.