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
.
