Nav Bar pushing margins on Phone

Here is my read only code: https://preview.webflow.com/preview/kubyenergy?preview=undefined

Problems: When I open my website on my phone, the nav button is outside the margins on my phone. The rest of my site’s content is aligned properly to the phone screen but I have to scroll to the right to see the dropdown menu. It appears to be fine in my webflow editor though.

To reproduce: Open site on cell phone. Scroll right to view the nav menu button. Why is it ‘off the screen’?

Done using latest version of Chrome.

Thanks!!

Hi @ayereniu, could you re-check the preview link you gave, the one you pasted is not working: Share a read-only link | Webflow University

I see a similar issue on Samsung S5 phone where the font has been raised to large under the accessibility settings of the phone. Using Chrome browser on the phone. Will try it with the stock Android browser and report back.

Hey @cyberdave, sorry about the link. Here is the correct one: https://preview.webflow.com/preview/kubyenergy?preview=f99961f420b4e34dc7a6e4b2d6c96a41

Hi @ayereniu, thanks for the updated link. It looks like there is an overflow problem on the site in mobile landscape mode and below. This happens when some element extends beyond the viewport, and causes the site to horizontal scroll and I believe issue for the menu.

You have an All Paragraphs class with the right margin set to -14px. On mobile landscape and lower, update that to 0px.

Also, you have some overflow on the Footer symbol, so on the mobile landscape and lower, double click the footer symbol, and on the root element, called Footer, set the overflow property to hidden:

I would check those things first, then republish and check again in mobile if any change. Cheers,
Dave

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