New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navbar width issue when in header or footer and has >= 3 buttons #5566

cricto opened this Issue Feb 1, 2013 · 1 comment


None yet
2 participants

cricto commented Feb 1, 2013

There's an issue in the JQM css that causes the navbar to exceed the width of the rest of the page on mobile devices when the navbar is in the header or footer and contains 3 or more buttons. This results in a thin white line to the right of the page when viewing on a mobile device and "pulling" the page to the left. You can also notice this on desktop browsers, if you hold click and move the mouse to the right edge of the browser.

Test page:

I fixed it by changing ".ui-navbar ul" overflow from visible to hidden (line 1920 of It would, I think, be a good idea for this change to be made in the next release.


This comment has been minimized.


jaspermdegroot commented Feb 1, 2013


I see what you mean. You see a bit of the page background. In general we recommend to set a theme on the page instead of on the content because you get to see the page background below the footer as well. But that is up to you of course.

At first we did use overflow: hidden; but we had to remove that because buttons didn't work anymore on Android if the toolbar has position fixed. See #4663.

Maybe we can set it overflow: hidden; on another container to prevent this, without breaking things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment