Home › Forums › WoodMart support forum › How to customize the drop-down menus of the header components?

How to customize the drop-down menus of the header components?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 10, 2024 at 9:48 am #621047

    zhufan122881
    Participant

    How can I set the background color, background radius, and font color when hovering in the drop-down menus of the “account ”and “WPML language ”components in the header?

    Attachments:
    You must be logged in to view attached files.
    December 11, 2024 at 10:49 am #621465

    Luke Nielsen
    Keymaster

    Hello,

    Try to use the code below for help:

    .wd-header-my-account .wd-dropdown-my-account ul li a {
    border-radius: 5px;
    margin-bottom: 5px;
    
    padding-left: 5px;
    padding-right: 5px;
}

.wd-header-my-account .wd-dropdown-my-account ul li a:hover {
    background-color: gray;
    color: #fff;
    margin-bottom: 5px;
}

    Let me know the result.

    Kind Regards

    December 13, 2024 at 9:15 am #622079

    zhufan122881
    Participant

    Yes, it works！Great!
    The same CSS should apply to other components, right?
    What are the CSS codes for the” WPML language” and “Categories” components Please？
    Thank you!

    Attachments:
    You must be logged in to view attached files.
    December 13, 2024 at 3:35 pm #622234

    Luke Nielsen
    Keymaster

    Hello,

    For the language dropdown, try to use the below code:

    .wd-dropdown-menu .menu-item.wpml-ls-menu-item a {
    padding: 10px 5px;
    background-color: gray;
    color: #fff !important;
    border-radius: 10px;
}

    As for the Categories, try to use the style “with background” – https://prnt.sc/WcZCMY-8M73x

    Kind Regards

    December 15, 2024 at 7:55 am #622535

    zhufan122881
    Participant

    For the language dropdown，the code does not work.
    Any way, Thank you so much !

    December 16, 2024 at 11:02 am #622693

    Luke Nielsen
    Keymaster

    Hello,

    For the language dropdown, try to use the below one:

    .wd-dropdown-menu .menu-item.wpml-ls-menu-item a {
    padding: 10px 5px;
    border-radius: 10px;
}

.wd-dropdown-menu .menu-item.wpml-ls-menu-item a:hover {
    padding: 10px 5px;
    background-color: gray;
    color: #fff !important;
    border-radius: 10px;
}

    Kind Regards

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