Mobile navigation CSS to change colors

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.

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

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.

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