Start a new topic

Change background of menu, cart etc...


I'm already testing merchium and I found one big problem :

I did my backgound in black color but the background of my menu and my cart stay in white, so we can't read the text because it's white ! I search a solution but i don't found how to do, even in the css editor ! can you tell me please ?


As far as I see, you have managed to resolve the issue. Please confirm it.

If the issue is still reproduced for you, please provide the details of the issue. Any screen shots are appreciated.

Thank you.

Humm Can you see the price ? No, because it's white on white, i can the background of the cart and the menu become black.

See the files please

cart2.PNG cart2.PNG
13.8 KB
cart1.PNG cart1.PNG
66.5 KB
cart.PNG cart.PNG
94.4 KB


Thank you for the clarification. 

In order to resolve the issue, please take the following steps:

1. In the store administration panel go to Design > Themes.

2. Click on the Visual editor button.

3. Select Colors from the Customize list.

4. Change the color in the Font section.

5. Save the style.

If you wish to change the background of the dropdown cart, please take the steps:

1. Go to the Design > Styles page in the store administration panel .

2. Add the CSS rule for the .cm-cart-content div selector with the background property of the necessary value.

Thank you.

Hello Mariya, hope you are well?

I'm looking hard, trying much and failing at everything!

I would like to change the colour of the background hover over the menu. I've attached a screenshot to help me explain. As you can see, it's almost white so my text is not showing on hover.

I've played with some css styling, also tried following this post but alas, I am missing something very important.

Would you mind sharing the code I need to add please?
Many thanks


Hello, Chris.

We are good, thank you.

In order to change the background of the mentioned element, please add the following CSS rule to the Custom CSS section of the Visual Editor:


.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
    background: #ff0000;

Set the value of the background property to the desired one. Please check it.

Thank you.

Oh dear Mariya, I must confess, seems I was miles away from getting the code right after all. Haha!

Thank you for helping, I shall play and choose my colour right now.

Top weekend to you and colleagues.


Chris, we are glad to help you.

Please note that you can use Developer Tools in Chrome and Firebug extension in Mozilla Firefox to see what CSS classes and properties a particular element has. You can change the properties on the fly to see the result (changes are displayed until the page is refreshed) and add the desired ones to the Custom CSS section after your experiments. Please refer to the following articles for additional information:

You can find information about CSS properties on the following resource:

I hope this will help you. Have a nice weekend too.

Thank you.

Wonderful, thank you for the links. I was just adding to the code you shared and have now got rounded corners too :-)

Thanks again Mariya, really is fun learning and definitely playing in Developer Tools too.


You are welcome. We are glad to help you.

Login or Signup to post a comment