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

Hi @Shani-Swim ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

{% if template.name == 'index' %}
    
{% endif %}

Here is result:

BSSCommerceHDL_0-1724836169232.png
BSSCommerceHDL_0-1724836169232.png1906×845 201 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like