Jump to content

Recommended Posts

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

Link to comment
  • Replies 10
  • Views 658
  • Created
  • Last Reply

Top Posters In This Topic

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!

Link to comment

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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.