Archived topic
Mobile Menu Items not aligned properly
7 replies · Started by Jonny on April 27, 2021
Hello,
I am having issues with the menu navigation items on mobile on posts and pages. The menu items I am referring to are the search icon and hamburger icon.
On some pages and posts, the search icon and hamburger icon on mobile are aligned side by side in the top right which is great, but on some other posts and pages the hamburger icon drops down to the left hand side of the screen beneath my logo.
I have tried many things to fix this including cache clearing and nothing seems to work.
I have included some links to my site in the private information box.
Thank you.
Hi there,
I'm not exactly sure I see the difference.
Here's what I see on my end. https://share.getcloudapp.com/mXupDRQz
As you can see. All 4 pages looked the same in alignment.
Can you try checking on another device?
Hi Elvin,
I am still experiencing this issue. I have cleared the cache and also checked on a few other mobile devices.
I took some screenshots and created a Google Drive folder for you to take a look at, see the link in the private box.
Thanks in advance! :)
I've checked the site again on my phone as well (Android, Chrome) and it looks fine, similar to what I've shown you.
I've checked the site on Iphone 12 Safari as well and it doesn't seem to have the same issue as well -https://share.getcloudapp.com/P8u5XnLN
This may be device-specific.
Can you tell us the device you use to view the site?
Hmm insteresting,
I checked on iphone XR (safari & chrome) and iphone 11 pro (safari & chrome)
I have tried many things to fix this including cache clearing and nothing seems to work.
When you cleared the cache, was is only the site cache on WP's end?
If you didn't clear the browser cache, try doing it as well.
Correct, I cleared cache on both wordpress and on the browsers and still, the menu items are not displaying in the top right corner.
Hi there,
the logo is being lazyloaded which can cause this kinda issue.
In most Lazy Loaders you have an option to exclude an image using a CSS class - you can use is-logo-image
