Color of dro[down menu items

woodyf4u

Hi.
How to change in T4 BS5 Blank the menu dropdown item background color?
Especially for hover and active.
What is the CSS code for it?

Thank you very much for you help.

saguaros

It's inheriting the settings for link color of main menu in template >> Theme color settings:

If you want to customize it, you can add this custom CSS code:

.t4-megamenu .dropdown-menu li > a:hover, .t4-megamenu .dropdown-menu li > a:focus, .t4-megamenu .dropdown-menu li > a:active, .t4-megamenu .dropdown-menu li > .nav-link:hover, .t4-megamenu .dropdown-menu li > .nav-link:focus, .t4-megamenu .dropdown-menu li > .nav-link:active, .t4-megamenu .dropdown-menu li .dropdown-item:hover, .t4-megamenu .dropdown-menu li .dropdown-item:focus, .t4-megamenu .dropdown-menu li .dropdown-item:active {
    color: your_color_here !important;
}

woodyf4u

In your answer I think you only refer to the colors of texts and links.
But I would like to change the background colors from the dropdown menu. And then for the active menu item and the menu item when I hover over it with the mouse.
Which CSS do I need for that?

saguaros

woodyf4u Any URL?

woodyf4u

Yes you can see it here.
I am rebuilding the template.
The original site with the old template (Joomlashine) is here: https://www.kindcentrumschalkhaar.nl/
And the site with the new template (TS4_BS5_Blank) is here: https://www.kindcentrumschalkhaar.nl/000/
As you ca see I can hover over the menu items of the dropdown menu at the original site.
But how ca I create that for the new template?

saguaros

woodyf4u

You can try this custom CSS:

.t4-megamenu .dropdown-menu li > a:hover,
.t4-megamenu .dropdown-menu li > a:focus,
.t4-megamenu .dropdown-menu li > a:active,
.t4-megamenu .dropdown-menu li > .nav-link:hover,
.t4-megamenu .dropdown-menu li > .nav-link:focus,
.t4-megamenu .dropdown-menu li > .nav-link:active,
.t4-megamenu .dropdown-menu li .dropdown-item:hover,
.t4-megamenu .dropdown-menu li .dropdown-item:focus,
.t4-megamenu .dropdown-menu li .dropdown-item:active {
    background-color: #8f3b88;
}

woodyf4u

Thanks a lot !!!
That was it.
Topic is solved now.