My main menu is stuck behind all of my content on my website?!

Store Design
, , ,

Topic summary

A user’s main menu is stuck behind page content on both desktop and mobile views, making it unusable.

Initial troubleshooting attempts:

  • First suggestion involved adjusting CSS z-index values for .header-wrapper and menu elements, but this didn’t resolve the issue
  • The site uses the Nostalgia theme

Working solution:

  • Adding overflow: visible !important; to .shopify-section in Custom CSS (Theme settings) fixed the problem in the editor

Current issue:

  • The fix works in preview but won’t publish
  • Alternative suggested: Add the CSS code to the bottom of the theme.css file instead of Custom CSS section

Status: Partially resolved - solution identified but implementation method needs adjustment to allow publishing.

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

My main menu on my page is not showing fully and is not usable.

It is hiding behind all of my content, can someone please help me?

It is happening on the desktop and the mobile view.

wyldwear.com.au

2

@wyldwear

This usually happens when the main menu’s z-index is too low, or the header is not set as position: relative or sticky, causing it to fall behind other elements on the page.

Here’s a quick fix you can try by adding this CSS:

.header-wrapper {
  position: relative;
  z-index: 9999;
}
.menu-drawer, .header__inline-menu {
  z-index: 9999;
}

How to apply it:1. Go to Online Store > Themes > Edit code.

  1. Open your base.css or theme.css file (depending on your theme).

  2. Paste the above CSS at the bottom.

  3. Save and check your site.

If your theme uses a different class for the header/menu, adjustments may be needed.

I’ll fix it at no cost — just share your store URL and theme name so I can apply a custom fix based on your setup.

3

Hi there,

Unfortunately this didn’t fix the problem ! :sob: :sob: I am using the theme Nostalgia

4

@wyldwear

I wonder if you can provide me with your store collaborator access code, so I can access it and fix it at no cost.

5

Please add this code to Custom CSS in Sales channels > Online Stores > Themes > Customize > Theme settings.

.shopify-section {
    overflow: visible !important;
}

Screenshot 2025-06-10 at 10.28.56.png
Screenshot 2025-06-10 at 10.28.56.png2746×830 184 KB

6

Hi there,

This code has worked in my editor view but it won’t let me publish it! any ideas as to why this is happening?!

7

You can try adding it to the bottom of the theme.css file instead.