Custom navigation colors (or class) for Overlay effect

[eddiepmonark]

Hi there,
I’d like to be able to have either a class on the same primary menu so I can do the following through the custom CSS or a way to do it without that using the theme’s tools if possible.

Since there is an option for Overlay in Header Type, (and this removes the background color from the header only right?), I’d like to be able to make the PRIMARY NAV a light color when I have a dark background/revolution slider behind it especially when there is the option for a LIGHT COLORED SITE LOGO IMAGE so how can I do this please?

[Veena]

You can use the below custom CSS in themeoptions –

#primary-menu > ul.menu > li > a {
    color: #F2F3F4;
}
#primary-menu > ul.menu > li > a:hover {
    color: #95C0EB;
}

[eddiepmonark]

You were right about that but it wouldn’t work if I had a white color for the links since it would stay white on the white background when you scroll so here’s what I did and it works perfect. Sharing it for others 🙂

.header-overlay #header:not(.sticky) #primary-menu ul.menu li a { color: #ffffff !important; }
.header-overlay #header:not(.sticky) #primary-menu ul.menu li a:hover { color: #fbb12a !important; }

[eddiepmonark]

and this would also take care of the dropdown nav

.header-overlay #header:not(.sticky) #primary-menu ul.menu li ul li a { color: #aaaaaa !important; }

[Veena]

Glad you resolved it and thanks for sharing with us.

[Author]

Posts