Mobile Menu Positioning

[primeapple]

Mobile Menu Positioning

Resolved

Hey there! Have you noticed this support service is provided FREE of charge?
If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you ♥

Consider a donation →

Viewing my site and your site on iPhone the mobile menu doesn’t stick to the bottom, it appears in the header. Could you provide a fix please? Appears OK in Chrome Devtools.

+++++++++++++++++++++++++++

The issue with mobile menu position is actually related to browser viewport height. If the height is under 447px (actually depends on the font size), the mobile navigation does not stick to the bottom of the screen to create more space for your website content. However, judging by your screenshot, there should be enough space in the browser viewport so the navigation is stuck at the bottom. I will investigate the issue and apply a fix in next theme update if needed.

Meanwhile, if you could log a ticket at support forum website (of course, only after you can access it), I can provide you with custom CSS code fixing this issue immediately.

[Oliver Juhas]

Hi primeapple,

Thank you for logging the ticket for the issue. Like I’ve mentioned, you can fix the issue with this custom CSS:

@media only screen and (max-height: 27.9375em) {
	.mobile-menu-container {
		position: fixed;
		box-shadow: 0 0 1.62rem rgba(0, 0, 0, 0.33);
	}
}

I will test thoroughly and if I am able to replicate the issue, I will provide the fix in next theme update too. Could you please share info what Safari and iOS version you used to test and what device? Thank you.

You might be interested…

• Adding CSS

Best regards,

Oliver Juhas
WebMan Design

[primeapple]

Thanks for the update Oliver.

iPhone 6
iOS 12.4.1

I can confirm the updated CSS resolved the issue.

[Oliver Juhas]

Thank you for the update.

Best regards,

Oliver Juhas
WebMan Design

[Author]

Posts