Change font color for top navigation menu on "hover state" & " click state" to my logo color

Site URL: https://www.aishwaryabalasankar.com

I am looking for help to change the font color for my navigation menu (about, contact & resume). I want to be able to change the color to my logo color when I hover or click on the navigation. Thank you!

33 minutes ago, Aishwarya said:

Site URL: https://www.aishwaryabalasankar.com

I am looking for help to change the font color for my navigation menu (about, contact & resume). I want to be able to change the color to my logo color when I hover or click on the navigation. Thank you!

.header .header-nav-wrapper a:hover {
  color: #e64d4f !important;
}
.header-nav-wrapper .header-nav-item--active a {
  color: #e64d4f !important;
  background-image: none !important;
}

Thanks so much for the prompt response! Should I add a code block to do the same?

Just now, Aishwarya said:

Thanks so much for the prompt response! Should I add a code block to do the same?

Sorry dont get your, it place in Design->Custom Css

Done! Thank you!!

On 12/17/2020 at 4:39 PM, bangank36 said:

Sorry dont get your, it place in Design->Custom Css

The code worked on the desktop version of my website. However, on the mobile version, it doesn’t work. I don’t see the hover and active states change colour in the mobile version. Looking for help with that. Appreciate your help! Thank you

2 minutes ago, Aishwarya said:

The code worked on the desktop version of my website. However, on the mobile version, it doesn’t work. I don’t see the hover and active states change colour in the mobile version. Looking for help with that. Appreciate your help! Thank you

.header .header-nav-wrapper a:hover {
  color: #e64d4f !important;
}
.header-nav-wrapper .header-nav-item--active a {
  color: #e64d4f !important;
  background-image: none !important;
}
.header-menu-nav-item:hover a {
  color: #e64d4f !important;
}
.header-menu-nav-item.header-menu-nav-item--active a {
  color: #e64d4f !important;
}

1 hour ago, bangank36 said:

.header .header-nav-wrapper a:hover {
  color: #e64d4f !important;
}
.header-nav-wrapper .header-nav-item--active a {
  color: #e64d4f !important;
  background-image: none !important;
}
.header-menu-nav-item:hover a {
  color: #e64d4f !important;
}
.header-menu-nav-item.header-menu-nav-item--active a {
  color: #e64d4f !important;
}

 

Thanks a lot! 

Hi @bangank36

I applied a CSS code to change the colour on hover for my main header navigation items.

Is there a code that will now change the colour of only the drop down items?

See https://jeanine-thompson.squarespace.com/ password tuansqsp

I want to change the colour of only the 3 drop down items under WORK WITH ME

3 hours ago, Iwan said:

Hi @bangank36

I applied a CSS code to change the colour on hover for my main header navigation items.

Is there a code that will now change the colour of only the drop down items?

See https://jeanine-thompson.squarespace.com/ password tuansqsp

I want to change the colour of only the 3 drop down items under WORK WITH ME

Kindly change from

.header-nav-item:hover a {
  color: #f45ec6 !important;
}

to

.header-nav-item:hover > a {
  color: #f45ec6 !important;
}

Sorry @bangank36 what I mean is can I change the hover colour of just the subnav items to a different colour when you hover over that subnav item?

31 minutes ago, Iwan said:

Sorry @bangank36 what I mean is can I change the hover colour of just the subnav items to a different colour when you hover over that subnav item?

For the color of sub, you can try

.header-nav-folder-content .header-nav-folder-item > a:hover {
  color: blue !important;
}

Let me know how it works

@bangank36 This works thank you!

Hey, I was wondering if anyone knew how to change the whole font on hover rather than just the colour? Thanks so much 🙂

On 10/27/2022 at 5:51 PM, C-bear said:

Hey, I was wondering if anyone knew how to change the whole font on hover rather than just the colour? Thanks so much 🙂

Try this

.header-nav-item:hover a {
  color: #f45ec6 !important;
	font-family: monospace !imprtant;
}