How can I change the navigation menu background color to black?

Store Design

Topic summary

A user is attempting to change their Shopify store’s navigation menu dropdown background to black, but previous CSS code attempts have failed. The site is unpublished, complicating troubleshooting.

Initial Solution:

  • A helper provided CSS code to add to the base.css file:
details[open] > .header__submenu {
    background: black !important;
}
  • This successfully changed the navigation dropdown background to black.

Additional Request:
The user then asked about changing the variant picker dropdown (showing “Sweatshirt”) to have a transparent background before clicking, with no changes when expanded—similar to the Infinite Options variant options below it.

Follow-up Solutions Provided:

  • CSS code for Infinite Options container text color
  • CSS code for the variant selector dropdown:
variant-selects select.select__select {
    color: white;
    background: transparent !important;
}
  • Additional code to change the dropdown arrow fill color to blue

Status: The discussion appears resolved, with the user thanking the helper for the solutions.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
8

Do you mean this one?

Made4uoRibe_0-1699915372838.png
Made4uoRibe_0-1699915372838.png406×201 60 KB

Im not sure if this code will work cause a I the code is alreayd overide.

Check this one.

variant-selects select.select__select {
    color: white !important;
    background: transparent;
}
variant-selects svg path, .product-form__quantity .quantity__button svg path {
    fill: blue !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like