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

Fixing Max Mega Menu Dropdowns That Are Hidden or Covered

13 threads Sep 9, 2025 Plugin → Max mega menu

Content

One of the most common issues users encounter with the Max Mega Menu plugin is a dropdown or submenu that appears to be missing, hidden, or covered by other page elements. This can be a frustrating problem, as the menu structure is correct in the WordPress admin, but it fails to display correctly on the front end of the site.

Why Does This Happen?

This behavior is almost always caused by a CSS conflict. Modern web pages are built by stacking elements in layers, defined by a property called z-index. An element with a higher z-index will appear in front of an element with a lower one. If a mega menu's dropdown has a lower z-index than a large page element below it (like a slideshow or a content section), the menu will be hidden behind it.

Another common cause is a CSS overflow: hidden; property set on a parent container of the menu. This property will clip any content that extends beyond the bounds of that container, effectively chopping off the mega menu's dropdown panel.

How to Troubleshoot and Fix the Issue

Based on common solutions found in the community, here are the most effective ways to resolve this problem.

Solution 1: Adjust the z-index

The most frequent fix is to ensure your site's header has a high enough z-index value so that its dropdowns appear above all other content.

  1. Navigate to your WordPress admin panel.
  2. Go to Appearance > Customize > Additional CSS.
  3. Add the following CSS code to the text area:
    header {
      position: relative;
      z-index: 9999;
    }
  4. Click Publish to save the changes.

This code gives the header a very high stacking context. The value 9999 is arbitrary but is typically high enough to surpass most other elements on a page. If this specific selector doesn't work for your theme, you may need to target a different header element, such as #site-header or #masthead.

Solution 2: Check for Overflow: Hidden

If adjusting the z-index doesn't work, a parent container might be clipping the menu.

  1. Right-click on your main navigation bar on your live site and select Inspect (or Inspect Element). This will open your browser's developer tools.
  2. In the HTML element tree, click on parent elements above your menu (often a <div> or a <header> tag).
  3. Look in the Styles pane for a CSS rule called overflow that is set to hidden, scroll, or auto.
  4. If you find one, you will need to override it. Using the Additional CSS area again, add a rule to set the overflow to visible. For example, if the problematic element has a class of .container, you would add:
    .container {
      overflow: visible !important;
    }

Solution 3: Perform a Conflict Test

As seen in the sample threads, sometimes the conflict is not with the theme but with another plugin. A conflict test can help you identify the culprit.

  1. Deactivate all your plugins except for Max Mega Menu.
  2. Check if the mega menu now works correctly.
  3. If it does, reactivate your plugins one-by-one, checking the menu after each activation, until you find which one causes the issue.
  4. Once identified, you can seek alternative plugins or contact the conflicting plugin's support for assistance.

By methodically working through these solutions—starting with the z-index fix—you can usually resolve issues where your Max Mega Menu dropdown is being hidden or covered by other page content.

Related Support Threads Support