Change the color scheme of mobile nav

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.wd-nav-mobile li a {
background-color: #171717;
color: white;
}

Best Regards

Hello,

Please replace the previous Custom CSS with the following then check back.

.wd-side-hidden.wd-opened {
    background-color: #171717;
}

.wd-nav-mobile li a, .wd-nav-mob-tab[class*="wd-style-underline"] .nav-link-text, .mobile-nav .searchform input[type="text"]::placeholder, .searchform .searchsubmit:after {
    color: white;
}

Best Regards

Hello,

Please, replace the old code with the below one, enter it to the “Global Custom CSS” area that is in Theme Settings -> Custom CSS.

.mobile-nav {
    --color-gray-100: rgba(255,255,255,0.1);
    --color-gray-200: rgba(255,255,255,0.2);
    --color-gray-300: rgba(255,255,255,0.5);
    --color-gray-400: rgba(255,255,255,0.6);
    --color-gray-500: rgba(255,255,255,0.7);
    --color-gray-600: rgba(255,255,255,0.8);
    --color-gray-700: rgba(255,255,255,0.9);
    --color-gray-800: #fff;
    --color-gray-900: #fff;
    --bgcolor-white-rgb: 0,0,0;
    --bgcolor-white: #0f0f0f;
    --bgcolor-gray-100: #0a0a0a;
    --bgcolor-gray-200: #121212;
    --bgcolor-gray-300: #141414;
    --brdcolor-gray-200: rgba(255,255,255,0.1);
    --brdcolor-gray-300: rgba(255,255,255,0.15);
    --brdcolor-gray-400: rgba(255,255,255,0.25);
    --wd-text-color: rgba(255,255,255,0.8);
    --wd-title-color: #fff;
    --wd-widget-title-color: var(--wd-title-color);
    --wd-entities-title-color: #fff;
    --wd-entities-title-color-hover: rgba(255,255,255,0.8);
    --wd-link-color: rgba(255,255,255,0.9);
    --wd-link-color-hover: #fff;
    --wd-form-brd-color: rgba(255,255,255,0.2);
    --wd-form-brd-color-focus: rgba(255,255,255,0.3);
    --wd-form-placeholder-color: rgba(255,255,255,0.6);
    --wd-form-chevron: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC42KSI+PHBhdGggZD0iTTYgOWw2IDYgNi02Ii8+PC9zdmc+);
    --wd-main-bgcolor: #1a1a1a;
    color: var(--wd-text-color);
}

.mobile-nav .wd-nav-mob-tab[class*="wd-style-underline"] {
		--nav-color: white;
    --nav-color-hover: white;
    --nav-color-active: white;
}

https://gyazo.com/e07ee6ebe82ad2f9d2eb7fd24480677b

Let me know if there is anything else I can help and have a good day!

Kind Regards

• This reply was modified 2 years, 9 months ago by Luke Nielsen.

Hello,

The thing is that by default the “search for products” doesn’t have any border but if you want it, you can add the below code also.

.mobile-nav .searchform {
    border: 1px solid #fff;
}

Kind Regards

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards