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
navbar-top-fixed
from zooming on mobilesThe final result:
On mobile devices only, is possible to calculate the zoom factor as the ratio of window.innerWidth
and the screen width, as shown in [2]. When the user toggles zoom, the resize event is triggered; moreover, when a page is reloaded that was previously zoomed, the zoom factor is maintained. Thus, one use jQuery to dynamically update CSS transforms that keep the header in shape. Note that, with position: fixed
, a transformation of the origin is also required. Applying class device-fixed-height
to the bootstrap nav
and device-fixed-width
to brand logo and hamburger icon then produce very close to the desired result.
Live example: http://www.exploretrade.info/other/example-fixed-nav-after-zoom.html
Bootstrap zoom-proof fixed top nav
Bootstrap starter template
Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in metus eget nisi imperdiet dictum ac eu metus. Morbi consequat sodales porta. Nam convallis sed dolor in ullamcorper. Vestibulum ut tortor porttitor, venenatis nulla iaculis, sollicitudin metus. Mauris ut hendrerit purus, sed ultricies lacus. Proin imperdiet, lectus vel efficitur hendrerit, quam tortor efficitur sapien, vehicula viverra magna ipsum vitae lacus. Sed faucibus elit vel massa placerat, in porttitor est suscipit. Pellentesque consequat condimentum elit, at sagittis erat euismod nec. Fusce consequat purus quis turpis volutpat, vel luctus tortor consectetur. Sed in lectus vitae enim fringilla faucibus. Mauris vitae risus ut ex convallis luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam tempor ante augue, sed iaculis nisi porta quis.