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
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.
17 comments
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.
Glad it helped Michelle.
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.
@bernard, Did you try changing overflow:hidden to overflow:default.
Hello, Bibin Wilson
I use everything but not fixed my issuo plzz help me..
Hi Habib,
Whats the issue you are facing?
Thanks that worked for me 🙂
Glad it worked Iain.
Hey,
Now what about the header that moving left and right on mobile?
how did you fix this?
Hi Ori,
I have made the outer element overflow:hidden. The menu element doest need the overflow:hidden propery.
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..
After 3h of pulling my hair I found your blog post. 😀 Thank you very much.
Glad it helped Arthur 🙂
Thanks.
I have struggled with this for the past 6 months until I read your post.
Resolved now.
Thanks.
Thank you so much!!!
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.
Oh my gosh, thank you so much, I was ready to throw Eleementor out. My bad.