[Resolved] Hover color for sticky nav with transparency

[Chris]

Hello, I used custom CSS to adjust the color of the sticky nav to be 0.7 transparency. I noticed than when hovering over a link it still shows the solid color box around the selection. I would like to add some code to make the background of the hovered item look transparent so only the color of the text changes.

Here is the code I added to create the transparency of the sticky menu:

.main-navigation.navigation-stick {
background-color: rgba(31, 38, 65, 0.70);
}

I’m curious what I should add to make the box around the hovered item look the same?

Thanks for your help!

[Leo]

Hi Chris,

I can’t see why CSS is required here.

Can you try setting everything up using the Primary Navigation section in the customizer first?
https://www.screencast.com/t/8mdnARqNB017

Let me know if I’m missing something here.

[Chris]

I figured it out. It was a case of two colors adding together and increasing the opacity. All set!

[Leo]

Glad to hear.

[Author]

Posts