Problem with mobile view cart (upon click on cart on mobile) sidebar

“All the matter is on mobile view”
I have changed the background color of the whole mobile navigation sidebar from white to a darker color. Also, I changed the text color of it from black to white to be visible on such dark background. But now, the bar of the cart (from the side) is also changed to that same dark color and the text is black yet (not visible). If I go to change the text in the cart bar, it changes the color of all titles on my website. Please help as soon as possible

Attachments:

You must be logged in to view attached files.

Hello,

Regarding the Mobile Menu Items color change, you can try out the Advanced Typography which can be found under the Dashboard > Theme Settings > Typography > Advanced > there you can select Mobile menu first level or Mobile menu second level as your selectors > and then you can define Color and Font Formatting for those under that: https://snipboard.io/LTMvE1.jpg

Regarding the Cart widget items color change specifically, you would need to try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.widget.woocommerce.widget_shopping_cart .cart_list .mini_cart_item .cart-info .wd-entities-title {
    color: #fff !important;
}

.widget.woocommerce.widget_shopping_cart .cart_list .mini_cart_item .cart-info .quantity .woocommerce-Price-amount {
    color: #fff !important;
}

This CSS will change the color of the Product title and its Price.

Further, if you want to change the Colors of the Shopping Cart and Subtotal headings too under the Cart widget then use the following CSS at the same above told location:

.cart-widget-side .wd-heading .title {
    color: #fff !important;
}

.shopping-cart-widget-footer .woocommerce-mini-cart__total strong {
    color: #fff !important;
}

Hope this helps !

Best Regards

There was no solution if I want to use darker background on the mobile menu. Because, if I do so, I need to make the product title white to be shown on that darker background. (the mobile menu problem will be solved)
On the other hand, a new problem will arise that all the product titles will become white and that will not be visible on any page like “product page” “home page” etc. So, I reversed my mobile menu to a lighter color and left the product title black. That was all I could do. You can close the topic. thanks

Hello,

You are Most Welcome.

We are glad that you managed to solve the problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts