Add a navigation link on specific pages only

Hi,

I'm on ISHSIMOTO 7.0 and would like to add a navigation link on specific pages only. Any idea how this can be done.

1 hour ago, lievenb said:

Hi,

I'm on ISHSIMOTO 7.0 and would like to add a navigation link on specific pages only. Any idea how this can be done.

I've try the following steps:

1. Add the navigator link as usual

2. Set Css to set none display to this navigator (for all pages)

3. Set Css to set display block to this navigator in some specific page id

My testing Css

/*set no display for the new navigator*/
.header-nav-item.header-nav-item--collection >[href="/Yournavlink"] {
  display: none;
}

/*Set display for new navigator in some specific pages*/
specificpages Id .header-nav-item.header-nav-item--collection >[href="/Yournavlink"] {
  display: block;
}

Let me know how it works and your site

Support me by pressing 👍 if this useful for you

Hi tried adding

.header-nav-item.header-nav-item--collection >[href="/contact"] {
  display: none;
}

but it still shows Contact in the navigation bar

Move any page you don't want on the nav bar to the unlinked section of your site. 

unlinked section is not a solution because than the page never shows up in the navigation. I'm looking for a way that the it shows up in the navigation in specific sections of the website

I can hide the full navigation bar on a specific page. With CSS code below.

/* Desktop - Tablet */
body#collection-616d4910a4a355709a2cb5e1 div#topNav {
    display: none;
}
/* Mobile */
body#collection-616d4910a4a355709a2cb5e1 div#mobileMenuLink {
    display: none;
}

Is there a way to hide just a single item from the navigation bar?

15 hours ago, lievenb said:

I can hide the full navigation bar on a specific page. With CSS code below.

/* Desktop - Tablet */
body#collection-616d4910a4a355709a2cb5e1 div#topNav {
    display: none;
}
/* Mobile */
body#collection-616d4910a4a355709a2cb5e1 div#mobileMenuLink {
    display: none;
}

 

Is there a way to hide just a single item from the navigation bar?

 

Use this code

/* Desktop - Tablet */
body#collection-616d4910a4a355709a2cb5e1 {
ul#nav>li:nth-child(1) {
    display: none;
}
}

is thetre a similar option for mobile?

On 11/8/2021 at 4:19 PM, lievenb said:

is thetre a similar option for mobile?

The code is for both desktop + mobile. You try checking again