Fix Clickable Elements Too Close Together Error With Elementor Pro

I spend hundreds of hours researching and testing so that I can provide you with the best money saving tips. I am supported by our readers and may earn a commission if you buy through our Affiliate Links at no cost to you. Thank you so much for your support. Read More

If you have a WordPress site you already know that making your site mobile friendly is a must.

After reviewing my Google Search Console report for one of the sites I run, I found that I had an error on the home page.  The page was flagged as not being mobile friendly due to clickable elements too close together.

The error was only on the homepage and I had used Elementor pro to build the page.  Fortunately, this is an easy fix.

The problem was that the nav menu items were too close together and it made it difficult for a mobile user to accurately select the menu item that they wanted.

How To Fix The Problem

When using Elementor Pro, open up the editor and select the Nav Menu element.

 

Next, go to the Styles option and select the Dropdown option. From the Dropdown option, click on the mobile button (the one on the right).  It will turn blue and then you can optimize just for mobile without affecting your desktop version.

Increase the vertical padding and the distance a bit so that the menu items are spaced farther apart.  Hit Update.

To test to see if you have fixed the issue, goto Google’s Mobile Friendly Test Page and enter in your URL.  If all is well then you are done.  If you still have not passed, adjust the spacing and try again.  Using the method is a lot easier than manually entering in CSS corrections into your style sheet.

3 thoughts on “Fix Clickable Elements Too Close Together Error With Elementor Pro

  1. Hey Tony, I have also a WordPress site and I’m Facing the same problem i.e Clickable elements are too close in my FAQ (Post page) page which is not built by Elementor, The posts were viewable by swiping right-left which might be too close but now I changed my page design again but the problem is still on my page. Can you help me out? Below I’m leaving my page’s link please review and suggest me the solution.
    Thankyou
    -Karan

Leave a Reply

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