How to change the color of the Navigation

Dear Support,

I need some help in changing the color of the main navigation and also changing the color of the links in drop down. Will you please tell me how to change these colors?

I am attaching the main page menu. I want the main menu to be Black on hover (white text) and the same for the drop down menu items as well.

Thanks and regard.

Attachments:

You must be logged in to view attached files.

Hello,

You can change the font by means of 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

Hi Elise,

Thank you very much for your response. I am able to change the color and line spacing using this method. I am still not able to change the background of the link on hover. For that, will I need custom CSS?

Thanks.

Hello,

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

.woodmart-navigation .menu-mega-dropdown .sub-menu-dropdown .sub-sub-menu li a {
    background-color: red;
}

You will get this result: https://prnt.sc/sn82vm if you want to set the background for the certain list item, assign a class and tell me which one and I will provide another CSS.

Best Regards

Hi Elise,

Thank you very much for your support.

I need to change the color of the main navigation and would be assigning a class e.g. mymainnav to it. I want the background of it to be black on hover and when the link is active. Also, will the same class apply to the sticky navigation as well?

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .whb-scroll-slide .main-nav .item-level-0.current-menu-item > a   {
    color:red;
	background:yellow;
}
body .whb-scroll-slide .main-nav .item-level-0 > a {
    color: yellow;
}
body .whb-scroll-slide .main-nav .item-level-0 > a:hover {
    color: orange;
	background:yellow;
}

Best Regards

Hi Elise,

Thanks for the code. I see that this code applies the CSS to only the main navigation and not to the same navigation when its sticky. Will you please provide me the code for the sticky navigation as well?

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .whb-sticked .main-nav .item-level-0.current-menu-item > a   {
    color:red;
	background:yellow;
}
body .whb-sticked .main-nav .item-level-0 > a {
    color: yellow;
}
body .whb-sticked .main-nav .item-level-0 > a:hover {
    color: orange;
	background:yellow;
}

Best Regards

[Author]

Posts