Archived topic
Hover color for sticky nav with transparency
3 replies · Started by Chris on August 30, 2022
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!
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.
I figured it out. It was a case of two colors adding together and increasing the opacity. All set!
Glad to hear.