Home Forums WoodMart support forum How to change the color of the Navigation

How to change the color of the Navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #197378

    hazesmokeshop
    Participant

    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.
    #197447

    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

    #197485

    hazesmokeshop
    Participant

    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.

    #197616

    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

    #198160

    hazesmokeshop
    Participant

    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.
    #198254

    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

    #199260

    hazesmokeshop
    Participant

    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.
    #199310

    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

Viewing 8 posts - 1 through 8 (of 8 total)