Navigation

Site URL: https://www.pbsconsultancy.net/

Hello,

I'm having an issue with my navigation css and wondered if anyone could tell me where I'm going wrong.

Firstly the 'Our impact' menu item needs to stay red when active and secondly the 'About' nav needs to be pink #FF29C7 on hover, active and sub menu hover.

The code I have is:

.header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important;
}

/* SS 7.1 - Remove nav underline */
header#header a:not(.btn) {
    background-image: none !important;
}
.sqs-block-html a {background-image:none!important}

/* our services hover */
.header-nav-item a[href="/our-services"]:hover {
    color: #59CBE8 !important;
}
/* our services active */
.header-nav-item--active [href="/our-services"] {
    color: #59CBE8 !important;
}
/* our services folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #59CBE8 !important;
}
/* our services folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #59CBE8 !important;
}
/* our impact hover */
.header-nav-item a[href="/our-impact"]:hover {
    color: #F9423A !important;
}
/* our impact active */
.header-nav-item--active [href="/about"] {
    color: #F9423A !important;
}

/* our support hover */
.header-nav-item a[href="/our-support"]:hover {
    color: #FFD100 !important;
}
/* our support active */
.header-nav-item--active [href="/our-support"] {
    color: #FFD100 !important;
}
/* about hover */
.header-nav-item e[href="/about"]:hover {
    color: #FF29C7 !important;
}
/* about active */
.header-nav-item--active [href="/about"] {
  /* about folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #FF29C7 !important;
}
/* about folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #FF29C7 !important;
}
    color: #FF29C7 !important;
}
/* resources hover */
.header-nav-item a[href="/resources"]:hover {
    color: #97D700 !important;
}
/* resources active */
.header-nav-item--active [href="/resources"] {
    color: #97D700 !important;
}

Any help would be much appreciated as I dont know what i'm doing wrong!

Thanks

Hi. It looks fine here. See video: https://www.loom.com/share/4a91e54cd0e94804ad86e0780caa9208

Thanks so much for replying with the video.

My issue is the 'Our Services' menu needs to be blue in every state (active, hover and submenus) and it's currently pink.

Also the 'News' needs to highlight in blue in every state.

It would be great if you had an idea where I'm going wrong

Thank you!

Ok I was missing the code for the news section, so that has been corrected, but I'm still having the issue where 'Our Services' is still appearing with Pink hover states instead of blue. It's as though the 'About' code is overriding this

On 7/8/2021 at 5:34 PM, MrPink said:

Ok I was missing the code for the news section, so that has been corrected, but I'm still having the issue where 'Our Services' is still appearing with Pink hover states instead of blue. It's as though the 'About' code is overriding this

You mean Our Service Dropdown Items? need blue on hover?

Yes that's right: Our Services should be blue on hover

23 hours ago, MrPink said:

Yes that's right: Our Services should be blue on hover

Add to Design > Custom CSS

/* Our services dropdown blue on hvoer */
a.header-nav-folder-title[href="/our-services"] + div a:hover {
    color: #59cbe8 !important;
}

Hi Tuanphan,

thanks for the css.

It's solved the hover states but the active color for Our Services is still pink when it needs to be blue.

Below is the full css I have. What else can I change to solve this?

Thank you

https://www.pbsconsultancy.net/

.header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important;
}

/* SS 7.1 - Remove nav underline */
header#header a:not(.btn) {
    background-image: none !important;
}
.sqs-block-html a {background-image:none!important}

/* Our services dropdown blue on hvoer */
a.header-nav-folder-title[href="/our-services"] + div a:hover {
    color: #59cbe8 !important;
}

/* our services hover */
.header-nav-item a[href="/our-services"]:hover {
    color: #59CBE8 !important;
}
/* our services active */
.header-nav-item--active [href="/our-services"] {
    color: #59CBE8 !important;
}
/* our services folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #59CBE8 !important;
}
/* our services folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #59CBE8 !important;
}
/* our impact hover */
.header-nav-item a[href="/our-impact"]:hover {
    color: #F9423A !important;
}
/* our impact active */
.header-nav-item--active [href="/our-impact"] {
    color: #F9423A !important;
}

/* our support hover */
.header-nav-item a[href="/our-support"]:hover {
    color: #FFD100 !important;
}
/* our support active */
.header-nav-item--active [href="/our-support"] {
    color: #FFD100 !important;
}
/* about hover */
.header-nav-item a[href="/about"]:hover {
    color: #FF29C7 !important;
}
/* about active */
.header-nav-item--active [href="/about"] {
    color: #FF29C7 !important;
}
  /* about folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #FF29C7 !important;
}
/* about folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #FF29C7 !important;
}
/* resources hover */
.header-nav-item a[href="/resources"]:hover {
    color: #97D700 !important;
}
/* resources active */
.header-nav-item--active [href="/resources"] {
    color: #97D700 !important;
}
/* news hover */
.header-nav-item a[href="/news"]:hover {
    color: #59CBE8 !important;
}
/* news active */
.header-nav-item--active [href="/news"] {
    color: #59CBE8 !important;
}
 

23 hours ago, MrPink said:

Hi Tuanphan,

thanks for the css.

It's solved the hover states but the active color for Our Services is still pink when it needs to be blue.

Below is the full css I have. What else can I change to solve this?

Thank you

https://www.pbsconsultancy.net/

 

.header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important;
}

/* SS 7.1 - Remove nav underline */
header#header a:not(.btn) {
    background-image: none !important;
}
.sqs-block-html a {background-image:none!important}

/* Our services dropdown blue on hvoer */
a.header-nav-folder-title[href="/our-services"] + div a:hover {
    color: #59cbe8 !important;
}

/* our services hover */
.header-nav-item a[href="/our-services"]:hover {
    color: #59CBE8 !important;
}
/* our services active */
.header-nav-item--active [href="/our-services"] {
    color: #59CBE8 !important;
}
/* our services folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #59CBE8 !important;
}
/* our services folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #59CBE8 !important;
}
/* our impact hover */
.header-nav-item a[href="/our-impact"]:hover {
    color: #F9423A !important;
}
/* our impact active */
.header-nav-item--active [href="/our-impact"] {
    color: #F9423A !important;
}

/* our support hover */
.header-nav-item a[href="/our-support"]:hover {
    color: #FFD100 !important;
}
/* our support active */
.header-nav-item--active [href="/our-support"] {
    color: #FFD100 !important;
}
/* about hover */
.header-nav-item a[href="/about"]:hover {
    color: #FF29C7 !important;
}
/* about active */
.header-nav-item--active [href="/about"] {
    color: #FF29C7 !important;
}
  /* about folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #FF29C7 !important;
}
/* about folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #FF29C7 !important;
}
/* resources hover */
.header-nav-item a[href="/resources"]:hover {
    color: #97D700 !important;
}
/* resources active */
.header-nav-item--active [href="/resources"] {
    color: #97D700 !important;
}
/* news hover */
.header-nav-item a[href="/news"]:hover {
    color: #59CBE8 !important;
}
/* news active */
.header-nav-item--active [href="/news"] {
    color: #59CBE8 !important;
}
 

With active item, use this code

.header-nav-folder-item.header-nav-folder-item--active a {
    color: #59cbe8 !important;
}

Thanks for the code Tuanphan.

The 'Our Services' title is still highlighting pink when you hover over the folder items. The entire code is below - can you tell me where i'm going wrong?

Thanks,

Spencer

.header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important;
}

/* SS 7.1 - Remove nav underline */
header#header a:not(.btn) {
    background-image: none !important;
}
.sqs-block-html a {background-image:none!important}

/* our services hover */
.header-nav-item a[href="/our-services"]:hover {
    color: #59CBE8 !important;
}
/* our services active */
.header-nav-folder-item.header-nav-folder-item--active a {
    color: #59cbe8 !important;
}
/* our services folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #59CBE8 !important;
}
/* our services folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #59CBE8 !important;
}
/* our impact hover */
.header-nav-item a[href="/our-impact"]:hover {
    color: #F9423A !important;
}
/* our impact active */
.header-nav-item--active [href="/our-impact"] {
    color: #F9423A !important;
}

/* our support hover */
.header-nav-item a[href="/our-support"]:hover {
    color: #FFD100 !important;
}
/* our support active */
.header-nav-item--active [href="/our-support"] {
    color: #FFD100 !important;
}
/* about hover */
.header-nav-item a[href="/about"]:hover {
    color: #FF29C7 !important;
}
/* about active */
.header-nav-item--active [href="/about"] {
    color: #FF29C7 !important;
}
  /* about folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #FF29C7 !important;
}
/* about folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #FF29C7 !important;
}
/* resources hover */
.header-nav-item a[href="/resources"]:hover {
    color: #97D700 !important;
}
/* resources active */
.header-nav-item--active [href="/resources"] {
    color: #97D700 !important;
}
/* news hover */
.header-nav-item a[href="/news"]:hover {
    color: #59CBE8 !important;
}
/* news active */
.header-nav-item--active [href="/news"] {
    color: #59CBE8 !important;
}
/* Our services dropdown blue on hvoer */
a.header-nav-folder-title[href="/our-services"] + div a:hover {
    color: #59cbe8 !important;
}

Add to last line in Custom CSS

.header-nav-item a[href="/our-services"]:hover {
    color: #59cbe8 !important;
}