Make transparent menu dropdown solid color

[agolden42]

I use transparent menus on some of the pages of my site, but not all pages. On the pages with the transparent menu, I’d like the background of the dropdown sub-menus to be the solid blue background like I have on the pages without a transparent menu. I can’t seem to figure out how to do that on a page by page basis. Please advise.

[Kieran_SQ]

Hi there,

Please use the below custom CSS in your KLEO Child themes style.css by going to WP Admin > Appearance > Editor > KLEO Child > Style.css

COPY CODE

.navbar-transparent .navbar-nav>li>.dropdown-menu li {
    background-color: #002868;
    border-bottom-color: #002868;
}

I used the blue that was already present in your menu, if this is not the color that you want then change the #002868 value to suit your needs.

Once saved purge your server, WordPress, and browser cache to see the changes.

Thanks,

Kieran

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

[agolden42]

Thanks! That worked great, but now I have a follow up question. Adding that CSS resulted in a very thin gray border between each li and, when I hover over the li, it adds a slightly darker shade. I like that result and would now like to add that to the menus on pages without a transparent border. How can I do that?

[Kieran_SQ]

Hi,

I don’t see that – can you share a screenshot or video of this so I see what you’re referring to.

Thanks,

Kieran

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

[agolden42]

See the attached, two screen shots. The first shows our homepage, which has the header set to transparent. The submenu shows thin, gray lines between each li and shading over the li that is hovered over. The second screen shot is from a page without the header set to transparent. No dividing lines and no shading on hover. I’d like to get the dividing lines and shading on over effect on the pages that are not set for a transparent header. Thanks!

[Kieran_SQ]

Hi,

That’s the blue border from my earlier CSS. Try the below CSS snippet which had the .navbar-transparent selector removed.

COPY CODE

.navbar-nav>li>.dropdown-menu li {
    border-bottom-color: #002868;
}

Thanks,

Kieran

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

[agolden42]

Thanks. That worked, but I had to adjust the color to match the border-bottom-color that seems to be naturally produced as the border-bottom-color on the pages with the transparent header by setting it to rgba(255,255,255,0.1) !important;

[Kieran_SQ]

Hi,

I see, well I am glad it could help in some way 🙂 Feel free to open a new topic if you have any other questions or experience any issues and we’ll be happy to assist.

All the best,

Kieran

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

[Author]

Posts