Home › Forums › WoodMart support forum › Background for the menu links on simple dropdown on hover

Background for the menu links on simple dropdown on hover

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 21, 2022 at 1:26 pm #407629

    afoukis
    Participant

    How to make the menu links on simle dropdowns (Browse Categories) when you hover over these links (“Back”, “Faux”, “Pouches”, “Shoulder”) to have a background like “Bags & wallets”?

    Attachments:
    You must be logged in to view attached files.
    September 22, 2022 at 5:53 am #407827

    Elise Noromit
    Member

    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

    September 22, 2022 at 8:52 am #407842

    afoukis
    Participant

    Hi,
    I already use “Advanced typography settings”, but I haven’t found how to change the backgound when hover over items from drop-down menu
    (“Back”, “Faux”, “Pouches”, “Shoulder”) to have a background like “Bags & wallets”)
    Pls, any help?

    September 24, 2022 at 3:47 am #408247

    Elise Noromit
    Member

    Hello,

    Please check the screen: https://gyazo.com/5812c6e68cb7f3f4608dc26903873d89 or add this code to the Theme settings > Custom CSS: 

    html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a {
color:red;
}
html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a:hover {
color:green;
}

    Best Regards

    September 24, 2022 at 10:26 am #408271

    afoukis
    Participant

    Hi,
    I don’t want to change the font color but the background color when the cursor hovers over items from drop-down menu.
    Please read the questions above and see the attachment

    September 26, 2022 at 12:14 am #408467

    Elise Noromit
    Member

    Hello,

    Please replace the code with this one: 

    html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a {
background-color:red;
}
html .wd-dropdown-cats .wd-nav.wd-nav-vertical > li > a:hover {
background-color:green;
}

    Best Regards

    September 26, 2022 at 9:25 am #408517

    afoukis
    Participant

    Hi,
    What I’m asking is only about the submenus. (submenu.jpg)
    When I hover over the sub-menus (e.g. Bags & Wallet => Back bags, Vegan, Pouches) the background color to change with red color and to cover both the left and right space of the word “Back bags” (extend to the entire rectangle of the menu item, there should be no white space but only the red)

    Thanks

    Attachments:
    You must be logged in to view attached files.
    September 27, 2022 at 3:16 am #408715

    Elise Noromit
    Member

    Hello,

    Please use this code: 

    .wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .wd-sub-menu > li > a, 
.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .sub-sub-menu > li > a {
   background-color:red;
}
.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .wd-sub-menu > li > a:hover, 
.wd-nav.wd-nav-vertical .wd-design-default.wd-dropdown-menu .sub-sub-menu > li > a:hover {
   background-color:green;
}

    Best Regards

    September 27, 2022 at 8:41 am #408747

    afoukis
    Participant

    Thanks I will try it

    September 28, 2022 at 2:30 am #408920

    Elise Noromit
    Member

    You are welcome! We are here to help.

    Wish you a wonderful day!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Background for the menu links on simple dropdown on hover’ is closed to new replies.