Unique Navigation Items on One Page

Site URL: https://cardcastle.co

Hello 🙂

I'd like to have one page of my site have different navigation items to all the other pages. I'm struggling to find a way to do it though!

The items in the main navigation bar currently are:

• Home
• Features
• Reviews
• Pricing
• About Us
• CardBot

I'd like those displayed on every page except the specific CardBot page (https://cardcastle.co/cardbot). On the CardBot page, I'd like to have the following:

• Book a Demo
• Features
• Pricing
• ROI

The Features and Pricing items on the CardBot page navigation bar would link to specific sections on the CardBot page, not the same ones as the main one links to.

Can anyone suggest a way to achieve this?

I was thinking that I could have all of the items in the navigation bar but hide the CardBot specific items on all pages except the CardBot page. On the CardBot page, I'd hide all of the items from the main navigation bar. Is that a possibility?

Quick update: I think I've figured out how to hide the CardBot specific items on all the other pages. I'm using the following code in the Custom CSS for the whole site, copying it for each item:

.Header-nav-item[href*="cardbot specific item"],
.Mobile-overlay-nav-item[href*="cardbot specific item"] {

      display: none;
}

Now I just need a way of not hiding them and hiding the others on the CardBot page.

The above didn't quite work because of the matching navigation items (Features and Pricing). Is there a way for me to specify that only the second navigation item with that name should be hidden?

Solved!

Thanks for your help Creedon 🙂

I ended up using the original CSS used in my first reply:

.Header-nav-item[href*="cardbot specific item"],
.Mobile-overlay-nav-item[href*="cardbot specific item"] {

      display: none;
}

I found a way to specify the CardBot specific items (referencing the link address rather than the name of the item).

So I used one of those for each CardBot specific item that needed to be hidden and one for each item that was to be hidden on the CardBot page (using the #collection ID so it only works on that page).

Then, also using the #collection ID, I forced each CardBot specific item to be displayed on the CardBot page only. It looked like this:

#collection-624a3eb14e60c9138593b5a8 {
  .Header-nav-item[href*=demo],
.Mobile-overlay-nav-item[href*=demo] {
  display: initial !important;
}

On a separate note, I also wanted to stop the CardBot navigation item from linking to itself. I used the following to do that:

a.Header-nav-folder-title[href="/cardbot-menu"] {
    pointer-events: none;
}