[rank_math_breadcrumb]

How to Fix Elementor Drop Down Sub Menu Hidden Behind Content? [SOLVED]

Updated on July 24, 2024 by

Are you having trouble with your Elementor dropdown sub menu appearing behind your content? 

This can be a frustrating issue to deal with, but fortunately, there are solutions available. Let’s look at all possible solutions.

Table Of Content

Understanding the Problem of Elementor Drop Down Sub Menu Behind Content (Hidden)

This is a common problem that many users face when designing their websites with Elementor. We will discuss what causes the issue of Elementor drop down menu not working and how you can fix it.

What is the Elementor Drop Down Sub Menu Behind Content Issue?

Header designed using Header Builder from The Plus Addons for Elementor

When you create a drop down sub menu in Elementor, it is supposed to appear on top of the content. However, sometimes the sub menu appears behind the content, making it difficult to access.

This can be frustrating for users and can negatively impact the user experience of your website.

Why Does the Drop Down Sub Menu Go Behind the Content?

There are several reasons why the Elementor dropdown menu may go behind the content. One possible reason is a z-index issue.

The z-index determines the stacking order of elements on your website. If the z-index of the content is higher than the z-index of the sub menu, the sub menu will appear behind the content.

Another possible reason is an issue with the CSS of your website. If the CSS is not properly configured, it can cause the sub menu to appear behind the content.

Additionally, the theme you are using on your website may also be causing the issue. Some themes may have conflicting CSS that causes the sub menu to appear behind the content.

Looking to build a Mega Menu on your Elementor website? Check out this list of top Mega Menu builder plugins that will simplify the process for you.

Solutions for the Elementor Drop Down Sub Menu Behind Content Issue

If you are experiencing the issue where your Elementor drop down sub menu is hidden behind other content on your website, don’t worry, there are several solutions that you can try to fix this issue.

Solution 1: Adjusting the Z-Index

If your drop-down sub-menu is appearing behind other content, you may need to adjust the Z-Index. This is a property that determines the order in which elements are stacked on top of each other.

To adjust the Z-Index of your drop-down sub-menu in Elementor, follow these steps:

  1. Select the element that contains your drop-down sub-menu.
  2. Go to the Advanced tab in the Elementor sidebar.
  3. Scroll down to the Z-Index option.
  4. Increase the Z-Index value until your drop-down sub-menu appears on top of other content.
  5. In my case, I have made it to 99, which should be enough.

It’s important to note that increasing the Z-Index value too much can cause other elements to appear behind your drop-down sub-menu. You may need to adjust the Z-Index of other elements on your page to ensure that everything appears in the correct order.

In some cases, you may also need to adjust the Z-Index of parent elements or containers that are affecting the stacking order of your drop-down sub-menu.

By adjusting the Z-Index, you can ensure that your drop-down sub-menu appears on top of other content and is easily accessible to your visitors.

Mega menus are expandable menus that can be presented in a straightforward dropdown format. Check out this step-by-step guide on How to Create a Mega Menu on Your Elementor WordPress Website.

Solution 2: Adjusting the Overflow Property

If you are facing the issue of the Elementor drop down menu behind content, adjusting the overflow property can solve the problem. 

Here are the steps to do it:

  1. Open the page in Elementor editor and select the container containing the navigation menu.
  2. From the layout tab, go to the Additional Options of the container.
  3. And make sure the Overflow is set to default and it’s not hidden.

Sometimes, the issue may be caused by the overflow property of the parent element, which affects the child elements. Adjusting the overflow property to visible ensures that the sub-menu appears on top of the content. 

By following the above steps, you can easily resolve the issue and ensure that your website’s navigation is user-friendly and functional.

Solution 3: Using The Plus Addons for Elementor Mega Menu

If you’re still experiencing issues with your Elementor drop-down sub-menu appearing behind content, using a mega menu created with The Plus Addons for Elementor could be a solution. Here’s how to do it:

  1. Install and activate The Plus Addons for Elementor plugin FREE & PRO plugin
  2. Create a new mega menu by clicking on Plus Mega Menu and then Add New.
  3. Give the mega menu a name and click Edit with Elementor to launch the Elementor interface.
  4. Use Elementor to design your mega menu, including any sub-menu items you want to include.
  5. Save your mega menu and go back to your WordPress dashboard.
  6. Go to Appearance > Menus and select the menu you want to add the mega menu to.
  7. Add a new Custom Link menu item and enter # as the URL.
  8. Give the menu item a label and then click the Plus icon to add a sub-menu.
  9. Select the Mega Menu option and choose the mega menu you created with The Plus Addons for Elementor.
  10. Save your menu and check your website to ensure the drop-down sub-menu appears correctly.

Here’s a video for it:

Using a mega menu created with The Plus Addons for Elementor can be a simple and effective solution to fix issues with Elementor dropdown menu behind content. 

Snapshot of Elementor Mega Menu created using The Plus Addons for Elementor.

Check out this step-by-step guide on How to Create a Mega Menu on Your Elementor WordPress Website.

Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​
  • SAVE MAXIMUM THIS BLACK FRIDAY

Don’t Miss the Mega WordPress
Black Friday Select Deals of 2024.

Subscribe to get notified first about the best Black Friday deals  on your favourite plugins.



    Thank you for reading; we covered various methods to solve the Elementor dropdown menu hidden behind content issue.

    Frequently Asked Questions

    What is Elementor Navigation Menu?

    Elementor Navigation Menu is a feature that allows you to create custom menus for your website. It is a part of the Elementor Page Builder plugin for WordPress.

    Why is my Navigation Menu not showing up in Elementor?

    If your Navigation Menu is not showing up in Elementor, there could be several reasons. One common reason is that you have not assigned a menu to the location you have selected in the “Nav Menu” widget. Another reason could be a conflict with another plugin or theme. Try disabling other plugins or switching to a different theme to see if that resolves the issue.

    How do I change the font size of the Navigation Menu in Elementor?

    To change the font size of the Navigation Menu in Elementor, you can use the “Typography” settings in the “Nav Menu” widget. This will allow you to adjust the font size, font family, and other typography settings.

    How do I add a logo to the Navigation Menu in Elementor?

    To add a logo to the Navigation Menu in Elementor, you can use the “Site Logo” widget. Simply drag and drop the widget onto the page and customize the logo’s settings.

    How do I add a search bar to the Navigation Menu in Elementor?

    To add a search bar to the Navigation Menu in Elementor, you can use the “Nav Menu” widget’s “Additional Items” option. Simply drag and drop the “Search Form” widget onto the “Additional Items” area and customize the search bar’s settings.

    How do I make the Navigation Menu sticky in Elementor?

    To make the Navigation Menu sticky in Elementor, you can use the “Sticky” option in the “Nav Menu” widget. Simply enable the “Sticky” option and customize the sticky menu’s settings. Alternatively, you can use The Plus Addons for Elementors’ Sticky Navigation Menu widget to make the navigation menu sticky without any coding. 

    How do I create a one-page Navigation Menu in Elementor?

    To create a one-page Navigation Menu in Elementor, you can use the “Nav Menu” widget’s “Anchor Menu” option. Simply enable the “Anchor Menu” option and add the appropriate anchor links to the menu items. This will allow visitors to navigate to different sections of the page without reloading the page.

    Related Blogs

    X