Text color on mobile menu

Hi,

We need to change the font color of the menu on mobile.

This text –> https://prnt.sc/r8n65w

We are using this CSS for the styling of the whole menu:

body .mobile-nav {
background-color: black;

}
body .color-scheme-light .sub-menu li {
color: black;
}
body .mobile-nav .sub-menu-dropdown ul {
background-color: black;
}
body .mobile-nav ul li a {
font-size: 13px;
color: white;
}
body .mobile-nav .icon-sub-menu:after,
body .mobile-nav .icon-sub-menu:before {
background-color: #333333;
}
body .mobile-nav .searchform button {
color: white;
}
.mobile-nav .searchform input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: white;
}
.mobile-nav .searchform input[type=text]::-moz-placeholder { /* Firefox 19+ */
color: white;
}
.mobile-nav .searchform input[type=text]:-ms-input-placeholder { /* IE 10+ */
color: white;
}
.mobile-nav .searchform input[type=text]:-moz-placeholder { /* Firefox 18- */
color: white;
}
body .mobile-nav .searchform input[type=text] {
color:white;
}
body .mobile-nav .autocomplete-suggestions {
background-color: #ffffff;
}
body .mobile-nav .autocomplete-suggestions .suggestion-title {
color:#7C7C7C;
}
body .mobile-nav ul li a:hover,
body .mobile-nav ul li a:focus{
color: white;
}
body .autocomplete-suggestions .suggestion-price span{
color: #7C7C7C;
}
body .color-scheme-light .sub-menu li a {
color: white;
}

What are we missing?

Hello,

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

body .site-mobile-menu li.current-menu-item>a{
color:red;
}
body .site-mobile-menu .sub-menu li a {
    color: red;
}

Set the color as per your needs.

Best Regards

Hi.

It did not work.
The color stays the same.
Is it possible to be affected by the big CSS i posted originally?

Thanks.

Hello,

Please provide the site admin access to the private area.
Best Regards

Hi.

The information is on the private area.

Hi.
You replied that we added the code twice –> https://prnt.sc/r95liv

I erased that original code and used the one you provided, and still the same.

Hello,

Sorry, I doublechecked.

Please replace the provided code to this one:

.site-mobile-menu li.current-menu-item>a{
color:red;
}
.site-mobile-menu li a span{
color:red;
}
.site-mobile-menu li a i {
color:red;
}

Best Regards

Thanks.

Still no changes.
The code you provided changes only the text below.
We want to change this text specifically –> https://prnt.sc/r8n65w

Hello,

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

body .mobile-nav-tabs .active {
    color: #ffffff;
}

Best Regards

Thank you.
That finally worked.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts