How can I remove the horizontal scroll bar at the bottom of my published mobile pages?

RESOLVED: Hi Webflow forum,

I’m having an issue I’ve seen pop up here from time to time, but when I’ve tried the fixes people have listed, it’s caused some problems. The issue is that when I look at my published pages on mobile, there’s a horizontal scroll bar across the bottom of my screen. When I tried to do the corrections, like one one listed below, I froze my screen and I couldn’t scroll at all.

Correction I tried:
“the reason that caused an issue is 100% width and you say margin 50px that tells the browser to stop 50px from edge of the screen but when you use negative margin -50px your telling it to push 50px past the screen edge. so your adding 50 more px 100% what the browser reads is at 100% add 50 more px”

I think I’ve isolated the negative margin the the Brand element in my Nav Bar…but like I said, when I corrected that, the whole site stopped scrolling.

Any other ideas would be very much appreciated, thank you!

Here is my site Read-Only:
([how to share your site Read-Only link][2])

I ended up figuring out the solution. Here’s what I did, in case this ends up helping anyone else out:

I indeed had a negative margin on an element in my Nav Bar, starting in the landscape mobile breakpoint. However, I had made a second Nav Bar element, detached from the original symbol, so the menu drawer could work properly on the two kinds of pages I had…one where the menu would scroll to different sections of the home page, and one to send the user back to said sections from project pages.

An element on the second instance of the Nav Bar with a negative margin needed to have the overfill eyeball turned off, and that fixed the problem.

So, heads up, if you’ve needed to make a second Nav Bar, don’t forget to correct any negative margins, or turn off overfills, on BOTH versions.

1 Like