Change dropdown menu color

Hi how i can change the background and hover colour of menu? i need a bit darker and not white.

https://redzeppelin.dblii.com

Attachments:

You must be logged in to view attached files.

Hello,

The background is changed in the HTML.

You can change the font by means of an Advanced typography option, which allows 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

yes i knwo but there is no css way to change the menu background? i must mandatory use White? this is not normal

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .menu-item-design-sized > .sub-menu-dropdown {
    background-color: red;
}
body .vertical-navigation .menu-mega-dropdown .sub-menu > li > a:hover{
color: yellow;
}

Set the colors as per your needs

Best Regards

Thanks see this video: https://monosnap.com/direct/THzVjTSlALTcY4Fdcu9Y9LN3UxbnU9
I need to change all menu levels please. Main menu, secondary menu ,and mega menu too

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.vertical-navigation .item-level-0>a {
    background-color: yellow;
}
.vertical-navigation .item-level-0>a:hover {
    background-color: green;
}

Best Regards

thank but again again they are incomplete. as i mentions above i need css for all menu levels and hovers. it is possible to provide me correct code because i am confused? thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .vertical-navigation .item-level-0>a {
    background-color: yellow;
		color:red;
}
body .vertical-navigation .item-level-0>a:hover {
    background-color: green;
	  color:yellow;
}
@media screen and (min-width: 1200px){
.categories-menu-dropdown .item-event-hover:hover >.sub-menu-dropdown {
    background-color: red;
}
}
body .vertical-navigation .menu-mega-dropdown .sub-menu > li > a {
    color: yellow;
}
body .vertical-navigation .menu-mega-dropdown .sub-sub-menu li a {
    color: yellow;
}
body .vertical-navigation .menu-mega-dropdown .sub-menu > li > a:hover {
    color: white;
}
body .vertical-navigation .menu-mega-dropdown .sub-sub-menu li a:hover {
    color: white;
}

Best Regards

Thanks some css repeat twice the same code, the only missing now is the hover background of submenu and megamenu, and the font of mega menu and sub menu, thanks!!!

Hello,

Replace two last styles with these ones:

body .vertical-navigation .menu-mega-dropdown .sub-menu > li > a:hover {
    color: white;
background: yellow;
}
body .vertical-navigation .menu-mega-dropdown .sub-sub-menu li a:hover {
    color: white;
background: yellow;
}

I di not provide style for background change in the mega menu block as it does not look good.

Best Regards

great thanks!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts