Invisible header side menu

Store Design
, ,

Topic summary

Issue: The header’s side menu becomes invisible after scrolling; the header switches to black, and the menu content also appears black, making it unreadable. Mobile had additional white-on-white visibility problems at the top of the page.

Actions taken:

  • Store URL shared for review.
  • CSS added to base.css to set menu item text to white when the header is in the scrolled state (e.g., .scrolled-past-header .header__submenu .header__menu-item { color: #fff !important; }). This resolved the desktop issue.
  • Further CSS targeted the mobile menu drawer elements to set link and summary text to white (e.g., .menu-drawer__inner-container …, .menu-drawer summary.menu-drawer__menu-item, button.disclosure__button.localization-selector { color: #fff !important; }).

Notes:

  • Some Liquid snippets suggested (template.name == ‘index’) appeared empty or non-functional; the effective fixes were CSS changes.
  • Key terms: CSS (styling rules for the site), base.css (theme stylesheet), theme.liquid (main Shopify theme file), menu drawer (mobile slide-out navigation).

Outcome: Desktop fixed first; mobile visibility issues then resolved after additional CSS. OP confirmed “Worked like magic.”

Status: Resolved for the original store. A new participant reported a similar mobile/tablet menu issue on a Dawn theme with a shared URL; that case remains open.

Summarized with AI on December 20. AI used: gpt-5.
6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

header.header.scrolled-past-header .header__menu-item.list-menu__item { color: #fff !important; }

niraj_patel_0-1724836351583.png
niraj_patel_0-1724836351583.png1184×311 55 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like