Jump to content

Need custom code to changing the font colour on hover

Recommended Posts

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

Hello,

I managed to add a dropdown menu in the primary navigation under 'SERVICES' on my website and change the background colour and font colour of the dropdown menu by adding a custom CSS.

https://www.yokokloeden.com/

However, I cannot add the hovering back (see other Primary navigation menu turns opaque on hover?) to the dropdown menu. The Custom CSS I added was below. Could anyone help, please?

/* Change dropdown menu background */
.tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-folder {
  background-color: #051e2b;
}

.Header-nav .Header-nav-folder-item {
  color: #cfa96e !important;
  }

.Header-nav .Header-nav-folder-item:hover {
  color: opaque
}

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, ladolcevita said:

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

Hello,

I managed to add a dropdown menu in the primary navigation under 'SERVICES' on my website and change the background colour and font colour of the dropdown menu by adding a custom CSS.

https://www.yokokloeden.com/

However, I cannot add the hovering back (see other Primary navigation menu turns opaque on hover?) to the dropdown menu. The Custom CSS I added was below. Could anyone help, please?

/* Change dropdown menu background */
.tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-folder {
  background-color: #051e2b;
}

.Header-nav .Header-nav-folder-item {
  color: #cfa96e !important;
  }

.Header-nav .Header-nav-folder-item:hover {
  color: opaque
}

Hi, css does not recognise the word opaque as a colour. You'll have to use the opacity property. Replace the last part of the code with this one instead. Let me know how it goes 🙂

.Header-nav .Header-nav-folder-item:hover {
  opacity: 40%;
}

Please give this a 👍 if it helps

Link to comment
On 3/9/2022 at 1:10 PM, Jia said:

Hi, css does not recognise the word opaque as a colour. You'll have to use the opacity property. Replace the last part of the code with this one instead. Let me know how it goes 🙂

.Header-nav .Header-nav-folder-item:hover {
  opacity: 40%;
}

It worked! Thank you very much 🙂

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.