How to prevent (bootstrap) fixed top navigation from zooming on mobile

Question

When using the fixed top navigation of bootstrap 3, I noticed that when users use the native zoom on mobile, the top navigation also becomes very large. This leads to a pretty p

Answer 1

The problem that you're seeing is because of the interaction between the header on the content div. The header is overlapping the content panel so when you zoom the header gets bigger and overlaps more content. If you separate the nav from the content it will probably solve your problem. The baseline bootstrap nav should be setup that way where the nave is above the main content container.

Remove the fixed position from the nav. Delete this:

position:fixed;

Remove the margin on the bottom of the nav:

margin-bottom: 27px;

Now your nav and content don't overlap and things zoom in a cleaner fashion. You also may want to add the img-responsive class to your logo which will help it scale correctly so it doesn't overlap the menu button on mobile.