Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Unique Navigation Items on One Page


Go to solution Solved by creedon,

Recommended Posts

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?

Link to comment

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.

Link to comment
  • Solution

I suggest the following CSS.

.Header-nav-item[href^="/cardbot"],
.Mobile-overlay-nav-item[href^="/cardbot"]

  {
  
    display : none;
    
    }

#collection-624a3eb14e60c9138593b5a8 .Header-nav-item:not( [href^="/cardbot"] ),
#collection-624a3eb14e60c9138593b5a8 .Mobile-overlay-nav-item:not( [href^="/cardbot"] )

  {
  
    display : none;
    
    }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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;
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...