Home Forums WoodMart – Premium Template How to change main menu colour leaving sticky header menu colour

This topic contains 6 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #128150

    gilbery007
    Customer

    Hi,
    I am trying to change the main menu items to white meanwhile leaving the sticky menu items to #333. How can this be achieved please?

    #128152

    gilbery007
    Customer

    Ok forget that have just found it in “theme settings” “Typography” “Advanced Typography”.

    #128153

    gilbery007
    Customer

    That hasn’t enabled me to do achieve what I was looking for sadly 🙁 So the question still stands, How can I change the colour of the main menu without affecting the sticky header menu item colours?

    #128162

    Hello,

    Thank you very much for choosing our theme and for contacting us.

    Please provide your site URL so that I could provide you with custom CSS.

    Best Regards

    #128164

    gilbery007
    Customer

    It’s being built on localhost so I am unable to provide URL

    #128167

    gilbery007
    Customer

    I have added some images so you can see what I am trying to achieve.

    img1 shows that the menu items are white and img2 shows the sticky menu once the page is scrolled but the menu items still retain the white colour. I would like the css code so that I may change these to #333.

    Hope this makes sense.

    Attachments:
    You must be logged in to view attached files.
    #128181

    Hello,

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

    /*sticky main menu color*/
    body .whb-sticked .woodmart-navigation  .item-level-0.current-menu-item>a{
    color:yellow;
    }
    body .whb-sticked .woodmart-navigation  .item-level-0>a{
    color:yellow;
    }
    body .whb-sticked  .woodmart-navigation  .item-level-0>a:hover{
    color:red;
    }
    body .whb-sticked .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
    color:yellow;
    } 
    body .whb-sticked .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
    color:yellow;
    }

    Replace the color as per your needs

    Best Regards

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

You must be logged in to reply to this topic.