Experiencing issues with nav dropdown? Share your advice

Store Design

Topic summary

A user reported dropdown navigation menu issues in their Shopify store, noting they hadn’t modified any styling. An image was shared showing the problem.

Solution Provided:

  • Add custom CSS code to theme.liquid file (before the </body> tag)
  • The fix involves setting z-index: 3!important on .header__submenu when details are open
  • This resolves the layering/display issue with the dropdown menu

Implementation Steps:

  1. Navigate to: Online Store → Edit Code → theme.liquid
  2. Insert the provided CSS style block
  3. Save changes

The responder confirmed the solution works with a follow-up screenshot and offered additional support via WhatsApp if needed. The issue appears resolved through this CSS z-index adjustment.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
4

@edodgen Hello,

Please add the below code above in theme.liquid

online store >> edit code >> theme.liquid

details[open]>.header__submenu{ z-index: 3!important; }

after added the given code dropdown looks like this.

shreyhweb_0-1683983193545.png
shreyhweb_0-1683983193545.png2148×542 179 KB

If our solution is helpful for you then Please like the post and tap on accepted.

If you want to discuss any further information then please contact us on our whatsapp.

We will always here for your help.

Thankyou :slightly_smiling_face:

1 Like