Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Twitter Bootstrap navbar-fixed-top overlaps screen when zoomed

When navbar-fixed-top is used, the top menu shouldn't expand in size

6:46 pm on Jul 18, 2015 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
votes: 99

When you zoom the page on a cell phone using navbar-fixed-top the menu eventually grows until it overlaps the entire screen and completely obscures the viewport stopping you from seeing the text you zoomed in to view in the first place!

Is there any fix for this, to keep the menu a single line or a reasonably small line, or switch is back to static when someone is zooming so you can see the text?

What's worse is then the footer is also fixed because the top and bottom nav then quickly meet each other when you zoom in to read small text.

Those issues make using navbar-fixed-top on a cell phone pretty unusable for anyone with less than perfect vision that needs to increase the size of the page.

Perhaps increasing the font size without zooming in the page would work perhaps adding an "aA" feature?

Anyone got a solution to this?
9:23 pm on July 18, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
votes: 1099

Sadly, HTML5 has deprecated FRAMESET (not iFrame) which reserves x% of a viewport (top, bottom, left, right, by dimension).

A few experiments with client sits willing to do so have been positive as all past and current browsers still support tis function.

Not a solution, but a way to work at present. Other than that, I have no answer as (stated elsewhere) I have not found a consistent method to accomplish a fixed menu that survives ZOOM.... (somebody screwed up when developing this new stuff in not taking into consideration that the screens were only going to get SMALLER, and the USER would have to zoom just to read it...)