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.