Where to edit styles for menu items
-
Hello,
Where can I style the category menus, I would like to add a hover color to the side flyout menu, Please see screenshot, Thank you
Attachments:
You must be
logged in to view attached files.
Hi Stryker,
Thanks for reaching to us.
Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to the below Custom Class:
.wd-dropdown.wd-dropdown-cats .wd-sub-menu li>a:hover
Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/
Regards,
There isn’t a better way to customize the menu styles like with elementor?
Hi Stryker,
Unfortunately, there is no way to edit styling of menu items via Elementor.
We have few pre-defined elements that you can use to change menu items’s styles https://ibb.co/c1D1n06 With the complicated ways, you need to use Custom CSS classes.
Hope it helps.
Regards,
Ok where is the stying coming from then? I see a light gray color when hovering over shop all mens. Please see screenshot. Also I want the sub-catergorie to be full width, I thought I could change it in the appearance section under the option
Attachments:
You must be
logged in to view attached files.
Hi Stryker,
To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.
Regards,
Please see private area below
Hi Stryker,
1. Hovering colors
Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
ul.wd-nav-vertical.wd-design-default>li:is(.wd-opened,:hover)>a {
background-color: #000;
color: #fff;
}
2. Dropdown’s width
Navigate to Appearance > Menu > Edit Desktop Category Menu > Expand Sub Item and in the drop down Settings choose the design Full Width https://ibb.co/fQp3t8Z
Regards,
Ok great thank you, i’ll give it a try
Ok that worked, But the sub menu did not change?
Attachments:
You must be
logged in to view attached files.
Hi Stryker,
The admin link has been expired, can you please re-send the new one?
Regards,
Sure, Please see private, Thanks
Hi Stryker,
Thank you so much.
.wd-header-cats .wd-dropdown.wd-dropdown-menu:hover{
background-color: #000;
}
.wd-header-cats .wd-dropdown.wd-dropdown-menu:hover .wd-sub-menu li>a{
color: #fff;
}
Regards,
Ok thanks that worked as well, But the hight does not match on hover, I have changed the hight in the menu settings for mens category but no change, Please see screenshots, Thanks
Attachments:
You must be
logged in to view attached files.
Hi Stryker,
The admin link has been expired, can you please re-send the new one?
Regards,
Hi Stryker,
Thanks for details.
Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
div.wd-dropdown-menu.wd-design-default {
padding: var(--wd-dropdown-padding, 5px 20px);
}
Regards,
.
