BugWP logo BugWP
Back to Community
Home / Community / Plugin → Max mega menu

How to Fix Z-Index Issues with Your Max Mega Menu

44 threads Sep 17, 2025 Plugin → Max mega menu

Content

One of the most common styling challenges users face with the Max Mega Menu plugin is controlling how the menu interacts with other elements on the page, particularly headers with drop shadows or other decorative features. A frequent request is to make a header's drop shadow appear over the mega menu panel to create a layered, "sliding out from under" effect. This issue almost always comes down to one CSS property: z-index.

Why This Happens

The z-index property controls the stacking order of elements on a webpage. An element with a higher z-index value will appear in front of an element with a lower one. By default, the Max Mega Menu plugin applies a z-index to ensure its panels appear above standard page content. However, if your theme's header also has a z-index value, the two can conflict, causing the menu to appear incorrectly in front of or behind the header.

How to Check for a Z-Index Conflict

To diagnose this, you can use your browser's developer tools:

  1. Right-click on your website's header and select Inspect.
  2. In the Elements panel, look for the CSS rules applied to the header. Look for a z-index property. Note its value.
  3. Next, right-click on the mega menu panel itself and inspect it. Find its z-index value.

If the header's z-index is lower than the menu's, the menu will appear on top. To fix this, you need to ensure the header has a higher value.

The Most Common Solution: Adjusting CSS

The primary method for resolving this is to add a small amount of custom CSS. You will need to increase the z-index of your header so it is higher than the mega menu's.

First, you need to identify the correct CSS selector for your theme's header. It is often a class or ID like .site-header, #masthead, or #header. Using the inspector tool as described above is the best way to find this.

Once you have the selector, add the following CSS code to your site, typically in Appearance > Customize > Additional CSS in your WordPress dashboard.

.your-header-selector {
    position: relative;
    z-index: 9999;
}

Important Notes:

  • Replace .your-header-selector with the actual selector for your header.
  • The position: relative; (or absolute, fixed, or sticky) declaration is required for the z-index to take effect.
  • The value 9999 is arbitrarily high to ensure it surpasses the menu's value. You may need to adjust it based on your theme.

What If This Doesn't Work?

If adjusting the z-index doesn't resolve the issue, consider these other potential causes:

  • Overflow Settings: Sometimes, a parent container of the header has an overflow: hidden; property that can clip the drop shadow. Inspect the elements around the header to check for this.
  • Theme Specificity: Your theme's CSS might be very specific, overriding your custom code. Use the inspector to ensure your new CSS is being applied and isn't being crossed out.

Conclusion

Controlling the z-index is the key to managing how your Max Mega Menu stacks against your header. By using your browser's inspector tool to identify the correct elements and their current values, you can write a small snippet of custom CSS to achieve the desired visual effect of the header's shadow overlapping the menu.

Related Support Threads Support