Back ground color mega menu

Store Design
, , , ,

Topic summary

Goal: change background color of the main menu bar and its mega-menu dropdown in a Shopify theme.

Key solutions proposed:

  • Base dropdown: add in assets/base.css
    • details[open] > .header__submenu { background: #F8F8F8; }
  • Mega-menu list: in assets/component-mega-menu.css
    • .mega-menu__list { background: #d9c0ad; }
  • Full-width menu bar (entire line behind items): in base.css (or main.css)
    • nav.header__inline-menu { background: #d9c0ad; width: 100%; display: flex; justify-content: center; }
  • Alternative to color individual top-level items:
    • .header__inline-menu .list-menu–inline .header__menu-item { background: #d9c0ad; }
  • Comprehensive option (bar + dropdown + spacing):
    • nav.header__inline-menu { background: #d9c0ad; }
    • .mega-menu__content .mega-menu__list { background: #d9c0ad; padding: 5rem 0; }
    • .mega-menu__content { padding: 0; }

Notes:

  • Some posted code contains typos that can break CSS (e.g., “back ground” with a space; “.header__menu- item” with a space).
  • Screenshots were shared to show expected and achieved visuals; code changes are central.

Status: Multiple workable CSS options provided; OP has not confirmed final resolution.

Summarized with AI on December 19. AI used: gpt-5.
10

Hi @Karla8

Do you mean like this?

Made4uoRibe_0-1726141485012.png
Made4uoRibe_0-1726141485012.png1659×305 40.1 KB

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

nav.header__inline-menu {
    background: #d9c0ad;
}
.mega-menu__content .mega-menu__list {
    background: #d9c0ad;
    padding: 5rem 0;
}
.mega-menu__content {
    padding: 0;
}

And Save.

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

1 Like