Changing Header Menu 1 colour

Topic summary

Goal: Change the Header “Menu 1” background color without altering other site areas (accent color only affected “Menu 2”).

Key actions:

  • Store URL shared for inspection. Guidance given to edit theme code via Online Store > Themes > Edit code.
  • Custom CSS was added, either in theme.liquid (before ) or preferably in base.css, targeting the specific header menu container.

Solutions provided:

  • Background color: Target .section-header .menu-top to set a custom background (e.g., #FFFFFF or #000000). Using !important ensures it overrides defaults.
  • Text color: Target links within that area (.section-header .menu-top a) to set color: #FFFFFF for white text.

Enhancement:

  • Center alignment: Add text-align: center to .section-header .menu-top. Replace prior snippets with a consolidated one if needed.

Example final CSS:

  • .section-header .menu-top { background-color: #000000; text-align: center; }
  • .section-header .menu-top a { color: #FFFFFF !important; }

Outcome & status:

  • User confirmed the color changes worked and achieved centered, white text. Screenshots were shared to show results. Issue resolved.
Summarized with AI on December 27. AI used: gpt-5.

@PageFly-Amelia

It looks like that now in our test theme