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.
21

Hello sir I need your help , I’m facing a problem in tablet and mobile view , when I click the burger icon a white transaprent backaground aprears instead of the menu , help me please to solve it

here it is my website I used dawn them : https://www.cozmic.me/