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.
When I created the menu in the Elementor template designer, the dropdown menu was working without any issue.
However, when I see 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 is 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 ad the overflow property was set to hidden.
So, to fix the menu dropdown issue, all I had to do was change the
Here is how you can check and fix this properly.
First, click on the many layout elements. Under layout configuration, you will find an overflow property. Change it from hidden to default as shown in the image below.
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 cleaNow if you validate the pages in Desktop and mobile, you can see the dropdown menu working without any issue.