Background for the menu links on simple dropdown on hover

How to make the menu links on simle dropdowns (Browse Categories) when you hover over these links (“Back”, “Faux”, “Pouches”, “Shoulder”) to have a background like “Bags & wallets”?

Attachments:

You must be logged in to view attached files.

Hello,

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

Hi,
I already use “Advanced typography settings”, but I haven’t found how to change the backgound when hover over items from drop-down menu
(“Back”, “Faux”, “Pouches”, “Shoulder”) to have a background like “Bags & wallets”)
Pls, any help?

Hello,

Please check the screen: https://gyazo.com/5812c6e68cb7f3f4608dc26903873d89 or add this code to the Theme settings > Custom CSS:

html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a {
color:red;
}
html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a:hover {
color:green;
}

Best Regards

Hi,
I don’t want to change the font color but the background color when the cursor hovers over items from drop-down menu.
Please read the questions above and see the attachment

Hello,

Please replace the code with this one:

html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a {
background-color:red;
}
html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a:hover {
background-color:green;
}

Best Regards

Hi,
What I’m asking is only about the submenus. (submenu.jpg)
When I hover over the sub-menus (e.g. Bags & Wallet => Back bags, Vegan, Pouches) the background color to change with red color and to cover both the left and right space of the word “Back bags” (extend to the entire rectangle of the menu item, there should be no white space but only the red)

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please use this code:

.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .wd-sub-menu > li > a, 
.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .sub-sub-menu > li > a {
   background-color:red;
}
.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .wd-sub-menu > li > a:hover, 
.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .sub-sub-menu > li > a:hover {
   background-color:green;
}

Best Regards

Thanks I will try it

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts