Home › Forums › WoodMart support forum › Mobile navigation CSS to change colors

Mobile navigation CSS to change colors

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 9, 2023 at 5:04 pm #441815

    hamster2116
    Participant

    Hello, could you please provide CSS to style the mobile navigation:
    -width
    -background
    -submenu background
    – active item background
    -border
    -active arrow icon and its background

    As there is no built-in theme options to choose custom colors, unlike in the header builder. I want to change the default white navigation.
    I was trying to find the selectors but had no luck. I want to change all colors to fit with the brand colors.

    see attached

    Thank you in advance

    Attachments:
    You must be logged in to view attached files.
    February 11, 2023 at 5:17 am #442217

    Elise Noromit
    Member

    Hello,

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

    .mobile-nav .wd-search-form{
background:yellow;
}
body .searchform .searchsubmit {
    color: red;
}
body .wd-nav-mob-tab li.wd-active a span{
    background-color: orange;
    color: red;
}
body .wd-nav-mob-tab li a{
    color: red;
    background-color: olive;
}
body .wd-nav-mobile li.current-menu-item>a {
    color: yellow;
	  background-color:green;
}
body .wd-nav-mobile>li>a {
    color: white;
	  background-color:black;
}
body .wd-nav-mobile>li>a:hover {
    color: white;
	  background-color:black;
}

    Please replace the colors as per your needs.

    Best Regards

    February 17, 2023 at 2:46 pm #443933

    hamster2116
    Participant

    Hello Elise thank you for the code. I am trying to change the background for submenu dropdown, active menu item and arrow icon background, see attached – please tell me what selector this is.

    Attachments:
    You must be logged in to view attached files.
    February 18, 2023 at 7:36 am #444178

    Elise Noromit
    Member

    Hello,

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

    body .wd-nav-mobile li:active>a, 
body .wd-nav-mobile li.opener-page>a {
    background-color: var(--bgcolor-gray-100);
}

    Best Regards

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