[Fixed] Elementor Menu Dropdown Not Working in Desktop & Mobile

Fix for Elementor Submenu issue

Recently I had a menu issue with Elementor where the menu dropdown was not working. In this blog, I will show you how to fix the menu drop-down issue.

I am using Elementor for a few of my WordPress websites.

Dropdown Issue

When I created the menu in the Elementor template designer, the dropdown menu was working without any issues.

However, when I saw the changes on the live page, the dropdown menu was not working both on desktop and mobile sites.

Solution for Dropdown Issue

After some research and debugging, I found that the problem was with the overflow:hidden CSS property

Here is the background on the CSS property. When I designed the Elementor header, I found that the header was moving left and right on the mobile site. So, to fix it I made all the CSS divisions in the header template to overflow:hidden. This includes the menu bar element as well.

It kind of blocked the menu bar drop-down and the overflow property was set to hidden.

So, to fix the menu dropdown issue, all I had to do was change the overflow:hidden to overflow:default.

Here is how you can check and fix this properly.

First, click on the many layout elements. Under the layout configuration, you will find an overflow property. Change it from hidden to default as shown in the image below.

Deal Alert: WPRocket Is offering 20% on it subscription till November 3rd. Lockin the price before it expires. Check the deal

Elementor Menu Dropdown Now Working soltuion

Don’t forget to save the changes

Clear the WordPress Cache

If you are using any caching plugin like WP Rocket, first you need to clear change WordPress cache to validate the Elementor changes.

If you use a CDN, clear the CDN cache as well.

After cleaner, if you validate the pages on Desktop and mobile, you can see the dropdown menu working without any issue.

0 Shares:
17 comments
  1. Thank you this worked! It was driving me insane trying to figure out what setting or CSS I needed to change. The Z-Index setting wasn’t doing anything. Really appreciate this post.

  2. Bonjour, I’m having this same problem with my dropdown layout. In the Editor, it’s working but when I preview it or make it live it still doesn’t work with your overflow suggestion. I’ve emptied caches and played around with it a few different ways. No luck.

  3. Hi got same issue – overflow set as default but still not working – Elementor is a new one for me so might have missed something (normally using themify, devi etc.. but have taken over this one)

    Chevron visible on edit page just not on front end..

  4. Thanks a million. It fixed the problem. I was having issue with the horizontal bar on mobile, so used overview: hidden to fix in custom css. Now I only used overview: hidden on mobile using css media max-width.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like