Dropdown menu items too close together in mobile


We currently have a Max Mega Menu on our website and I’ve been working on a simpler menu that doesn’t use any plugin. It looks roughly how I want it to on desktop (we have it set up on one page) but when I view it on my phone the links are too close together. There is some space between them but it should be more so people can easily touch the correct menu item.

I am using the Menu module on a Themer Layout and have made adjustments in places that I thought would fix the spacing wherever I have spotted something. I can see it change on desktop but not on my phone. I have cleared the Beaver Builder cache and Breeze cache.

I cannot figure this out. I don’t know if it makes a difference that this new menu does not get to be labeled as the Header Menu location. Perhaps there is some setting I missed. I have tried using CSS for this specific problem without any luck.

Any help would be greatly appreciated. We are using the Beaver Builder child theme.

Thank you!

Well two weeks later and no responses. I ended up creating a separate menu for mobile using a different module - it didn’t have all the features I wanted so I had to use two modules instead.

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.