Hi,
In this update I remove every possible !important tag in the css, since it’s not a good practice to use !important when isn’t necessary.
Unfortunately StoreFront is using the !important tag in a rule that affects all the site links what is a bit aggressive approach in my opinion.
To sort it we also need to use the !important so that our rule is executed instead the StoreFront css.
Add the code below to the custom css option in the General Options
@media only screen and (max-width: 767px) {
.mobmenul-container .mobmenu-left-bt, .mobmenur-container .mobmenu-right-bt {
color: #ffffff!important;
}
}
Let me know if it works, clear the browser cache.
-Takanakui
Thread Starter
w-sky
(@w-sky)
Yes this helped for menu icons, not for menu text color unfortunately.
I forgot about the text color of the menu items.
Replace the previous css by this one.
@media only screen and (max-width: 767px){
#mobmenuleft li a, #mobmenuleft li a:visited, #mobmenuright li a, #mobmenuright li a:visited , .mobmenul-container .mobmenu-left-bt, .mobmenur-container .mobmenu-right-bt {
color: #FFF!important;
}
}
-Takanakui
Thread Starter
w-sky
(@w-sky)
Working very well, thanks!
Thread Starter
w-sky
(@w-sky)
Can I join this CSS statement and the other for logo positioniong to one?
@media only screen and (max-width: 767px) {
.logo-holder {
margin-left: calc(50% - 40px);
}
}
@media only screen and (max-width: 767px) {
#mobmenuleft li a, #mobmenuleft li a:visited, #mobmenuright li a, #mobmenuright li a:visited , .mobmenul-container .mobmenu-left-bt, .mobmenur-container .mobmenu-right-bt {
color: #FFF!important;
}
}
Of course, replace it by this one.
@media only screen and (max-width: 767px) {
.logo-holder {
margin-left: calc(50% - 40px);
}
#mobmenuleft li a, #mobmenuleft li a:visited, #mobmenuright li a, #mobmenuright li a:visited , .mobmenul-container .mobmenu-left-bt, .mobmenur-container .mobmenu-right-bt {
color: #FFF!important;
}
}
Hope it helps.
-Takanakui
Thread Starter
w-sky
(@w-sky)
Working perfectly, as before. Thanks a lot!
Great stuff. Happy to help.
-Takanakui
Thread Starter
w-sky
(@w-sky)
…and now a have something new. I changed the background color for Mobile Menu from dark green to white, because it suits better with the Storefront theme which adds a button bar at the bottom of the screen which is white too.
Anyway, now the arrow down button at the right submenu is white on light, almost invisible, though text color etc. are now set to darker colors.
It’s all Storefront messing with those “important” tags, right?
-
This reply was modified 9 years, 4 months ago by
w-sky.
Try to add the code below to the custom css option.
.mob-icon-down-open {
color: #165b00;
}
.mob-icon-down-open:hover {
color: #fff;
}
-Takanakui
Thread Starter
w-sky
(@w-sky)
I had to add the !important flag, but it helped. Thanks again! Now it’s beautiful I think. 🙂
