Colors of menu items

Hello, I simply cannot find the place where to define the color and hover color of the menu items in the main menu and sub menus.
In the css for the main menu it looks like this:
.wd-nav[class*=”wd-style-“]>li>a {
color: var(–nav-color);
}
But I don´t find anything in the theme options.
The same for the sub menus, see screenshot.

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

Hello,
I tried all the selectors in the Advanced Typography Settings but they don´t apply to the menus in my mega menu. The mega menu contains several menu widgets. I would like to change color of these menu items.
Best regards

Hello,

Did you try these selectors: https://gyazo.com/46d1ceaeb0fb6f68ecc91a47c0937c3b ‘

Best Regards

Yes I tried it and it does not work. The styles are only applied to the links created with the extra menu list element. The submenus created with the menu widget are not affected by these selectors. So I would like to know where I can set the color of the variable wd-link-color (see attachment above).

Hello,

I am checking the drop-down menu and see that the items have defaulted and hover color as per your settings in the Advanced typography: https://gyazo.com/5109c34e3fef495e76048d1355527b87

Please provide the screen of which menu and what sub-menu item you are trying to change.

Best Regards

Hi, yes the items you show in the video are the blue links created with the extra menu list element. The submenus (see screenshot) created with the menu widget are not affected by the selectors in the advanced typography settings.

Attachments:

You must be logged in to view attached files.

Hello,

Please try this custom selector: widget_nav_menu ul li a

Let us know if it does not work.

Best Regards

Hello, sorry, it is not working.
Best regards

Hello,

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

.widget_nav_menu ul li a {
   color:red;
}
.widget_nav_menu ul li a:hover {
   color:blue;
}

Please set the colors as per your needs.

Best Regards

Thank you, but it does not answer my initial question where I can define the color of this varible wd_link_color shown in the screenshot. This variable is defined with the color #727272 which has been there by default. Probably wd_link_color is used somewhere else in the website too so I would like to have the control. So far I will help myself with the code you sent me, thank you. But it would be better if I knew where to change the value of the variable.

Hello,

The global colors for all the links are set in the Theme Settings > Styles and colors.

If you have any questions please feel free to contact us.

Best Regards

Thank you )-: I send you the login credentials below, please try by yourself if you can change the widget link colors in the mega menu (see screenshot links.jpg in my message of January 17) there.

Since 2 weeks I try to communicate to you that I try to change certain link colors in the mega menu that are defined in the woodmart/css/parts/base.min.css like this: a {color: var(–wd-link-color);}
Where in the theme can I set another color for var(–wd-link-color)?
This var is #727272 at the moment but I cannot change it.
I have set the global color for all the links in the Theme Settings > Styles and colors to a strong purple (rgb(130,36,227)) that you can notice the difference to the dark grey color of the menu items.

Hello,

I have double-checked the Advanced typography and I see you have set the colors: https://gyazo.com/2d5ba19cd1c0865fe0ccf893649405d8

I am checking the menu and see that the colors are applied correctly to this selector.

Next, you asked to change the color of these items: https://gyazo.com/42c1a8ed74187b4bd95d178affa02732

Though they are in mega menu, they are not menu items: https://gyazo.com/f86b5424d87385c766b81b0df7766552

I have provided the custom selector and custom CSS:

.widget_nav_menu ul li a {
   color:red;
}
.widget_nav_menu ul li a:hover {
   color:blue;
}

When I add this code, the color is changed properly: https://gyazo.com/0b3b3483502da3cb2941c1c885bc2d3b

Please add either the custom selector or code and set the colors as per your needs.

Best Regards

Thgank you. In the video you sent me (https://gyazo.com/f86b5424d87385c766b81b0df7766552) the hover color of the variable wd-link-color-hover is set to #333. I still find it weird that you obviously cannot tell me where in the theme I can find the place where somebody has defined the color #333. Somebody has set the #333 and I want to know where. Of course I can apply your CSS and overwrite these settings. But to keep the code as light as possible and to better understand the structure of the theme, I’d rather know where #333 is defined.

Hi,

Sorry for the misunderstanding. We have inspected your mega menu content and found that it is not configured in the way that is supposed to be in our theme. If you want to create a menu customizable via advanced typography in the mega menu dropdown you need to use “Extra menu list” and add menu items directly to it via element controls like it shown on screenshots:

Backend – https://prnt.sc/26klo2h
Frontend – https://prnt.sc/26kloj1

Of course, you can use other elements to build your mega menu, but in that case “advanced typography” may not work how it use to. “WP custom menu” element that you use in your mega menu inherits HTML structure (https://prnt.sc/26km2vf) and CSS styles (https://prnt.sc/26km39n) from WordPress widgets (which is by default is placed on-site sidebars https://prnt.sc/26km1rb). Color of links in widgets is set theme CSS and can be changed only by custom CSS code.

In that case, we suggest you two solutions:

1. Recreate your mega completely via “Extra menu list” element and use “advanced typography” to configure its font and color.
2. Use “WP custom menu” and configure it via the custom code provided below.

Code needs to be added to the Custom CSS area in Theme Settings.

.wd-dropdown-menu .widget, 
.wd-dropdown-menu .wd-widget, 
.wd-dropdown-menu div[class^="vc_wp"] {
    --wd-link-color: red;
    --wd-link-color-hover: blue;
}

Kind Regards

Thanks a lot.

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts