Problems with Storefront theme for WooCommerce

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

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

Working very well, thanks!

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

Working perfectly, as before. Thanks a lot!

Great stuff. Happy to help.

-Takanakui

…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 7 years, 10 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

I had to add the !important flag, but it helped. Thanks again! Now it’s beautiful I think. ??

Great stuff.
-Takanakui