Transparent main menu, white submenu?

[teamwepv]

Hi,
I’ve spent hours searching this forum and trying to find a solution by myself without success.

I would like to achieve a fixed transparent main menu with white links/text, and a white submenu with black links/text.

When “transparent main menu” is selected, either via the individual page level or the Styling Options page, the submenus then become a black opaque color, and no amount of adjusting the header colors under the Styling Options page seems to change it.

I’ve tried the following bit of CSS but it just creates a white submenu with white text and a grey highlight feature (I don’t have grey in my Styling Options selected).

ul.dropdown-menu.sub-menu a:hover {
color: #ccc !important;
}
ul.dropdown-menu.sub-menu {
background-color: white !important;
color: black;
}

Please help. Thank you. The site is http://www.teamflighttraining.com

[sharmstr]

But #ccc is grey. 🙂 You’re setting that yourself in your css.

Try this for the black text in the dropdown

.navbar-transparent .navbar-nav .dropdown-menu li a {
color: black !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[teamwepv]

Touche. 🙂 That being said, using the following css, it generates a gray hover highlight bar that I want to get rid of. I’m trying to achieve highlighted text only, not a highlighted “box” effect. Thanks again.

ul.dropdown-menu.sub-menu {
background-color: white !important;
}
.navbar-transparent .navbar-nav .dropdown-menu li a {
color: #666 !important;
font-weight: 600;
line-height: 10px;
}
.navbar-transparent .navbar-nav .dropdown-menu li a:hover {
color: black !important;
}

[sharmstr]

Its actually not grey, its a transparency, so trying to override it with a color wont work. You need to override it with a different transparency

.navbar-transparent .navbar-nav>li>.dropdown-menu li>a:hover, .navbar-transparent .navbar-nav>li>.dropdown-menu li>a:focus, .navbar-transparent .dropdown-submenu:hover>a, .navbar-transparent .dropdown-submenu:focus>a, .navbar-transparent .dropdown-menu>.active>a {
color: black !important;
background-color: rgba(0,0,0,0)!important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[teamwepv]

I see, and it works. Thank you! Issue resolved.

[Author]

Posts