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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[agolden42]

This reply has been set as private.

[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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts