Header Serious Issue

Shopify Discussion

Topic summary

A Shopify store owner encountered a header dropdown menu visibility issue where hovering over the navigation caused the dropdown to be cut off at the header line.

Solution Provided:

  • Add CSS code to the theme’s base.css or theme.css file
  • The fix involved adding overflow: visible !important; to the .header class
  • Access via: Shopify Admin → Online Store → Themes → Customize → Theme actions → Edit code

Resolution:
The issue was successfully resolved after pasting the CSS code at the bottom of base.css. The fix required a browser refresh to take effect.

Key Takeaway:
When making CSS changes to Shopify themes, always clear the theme cache and refresh the browser to see updates properly applied.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello,

When I hover over my header in desktop mode, the dropdown gets cut off at the line of the header. please see screenshot to see what I mean. How can I fix this? Thanks so much.

URL: www.samiyaskincare.com.au

Screenshot 2025-02-20 at 08.48.10.png
Screenshot 2025-02-20 at 08.48.10.png3840Ă—1062 394 KB

2

I can help you fix that header visibility issue. Let me break down the steps to safely add this CSS to your theme:

  1. From your Shopify admin, go to “Online Store” → “Themes”
  2. Click on “Customize” for your active theme
  3. Click on “Theme actions” (the three dots ••• in the top-right corner)
  4. Select “Edit code”
  5. Look for the file assets/base.css or assets/theme.css (the name might vary depending on your theme)
  6. Scroll to the bottom of the file and add this code:
.header {
    overflow: visible !important;
    /* This ensures dropdown menus and other header elements remain visible */
}
3

Hello, I just pasted this at the bottom of my base.css and it didn’t work

4

This is my latest css code. Is it something to do with this?

Screenshot 2025-02-20 at 09.04.04.png
Screenshot 2025-02-20 at 09.04.04.png3840Ă—2388 752 KB

5

Hang on! I refreshed again and it seems to be working. Thanks so much.

1 Like
6

I’m glad I could help you resolve the header visibility issue! Thank you for marking the solution - it helps other community members who might face similar challenges.

For future reference, if you run into any CSS or theme customization issues, here are some tips:

  • Always remember to clear your theme cache after making CSS changes
  • Test changes in multiple browsers to ensure consistency
  • Keep a backup of your original code before making modifications