Some buttons and menu's are black

Store Design
, , , , , , ,

Topic summary

A Shopify store owner is experiencing visibility issues after making their header transparent—dropdown menus and product variant buttons appear black and are difficult to read.

Affected Elements:

  • Submenu dropdowns in the navigation
  • Product variant selection buttons on product pages

Solutions Provided:

Two community members offered CSS fixes targeting specific theme files:

Option 1 (Asad-Mahmood): Add CSS to base.css file to modify background colors for menu drawers, variant buttons, media icons, and localization forms.

Option 2 (Rahul_dhiman): More targeted approach with separate fixes:

  • Edit component-menu-drawer.css to change submenu background color to #d3cccc
  • Edit component-product-varient-picker.css to set checked variant label text to white

Both solutions include code snippets with !important flags to override existing styles. Screenshots demonstrate the expected results showing improved contrast and readability.

Status: Multiple solutions provided; awaiting confirmation from original poster on implementation.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Im working on this website:
https://v7wybx-kb.myshopify.com/

Since I’ve made the header transparant, the menu was black in color, and buttons.
I’ve fixed the main menu, but now the dropdowns (submenus) are still black. Also if you visit a product page, you see that the varients are also black. What can I do to fix this?

2

@SoulfulJourney

mrashid_0-1746036621559.png
mrashid_0-1746036621559.png1094×430 163 KB

3

I would like it to be the same as the main menu. Also the buttons I mentioned need to be the same as the other buttons. Like the varients and stuff.

4

Go to your online store → edit code → base.css file and paste this code in the end of file

.menu-drawer__inner-submenu {
    background: #d3cccc !important;
}
.product-form__input--pill input[type=radio]:checked+label {
    background-color: #fff !important;
}
.product__media-icon, .thumbnail__badge {
    background-color: #ffffff !important;
}
.disclosure__button.localization-form__select {
    background: transparent !important;
}
5

Hello @SoulfulJourney

  1. the dropdowns (submenus) are still black :-

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-menu-drawer.css
add this code at the end of the file and save.

.js .menu-drawer__submenu {
background-color: #d3cccc !important;
}

result

11.png
11.png658×595 136 KB

  1. if you visit a product page, you see that the varients are also black :-

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-product-varient-picker.css
add this code at the end of the file and save.

.product-form__input--pill input[type=radio]:checked+label {
color: #fff !important;
}

result

10.png
10.png487×490 107 KB

If this was helpful, hit the like button and accept the solution.
Thanks