How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

http://dansajin.com/2012/12/07/fix-position-fixed/ this is one of the solutions proposed. Seems worth a shot.

In short: set fixed elements to position:absolute when any input is focused and reset them when that element is blurred

.header {     position: fixed; } .footer {     position: fixed; } .fixfixed .header, .fixfixed .footer {     position: absolute; } 

and

if ('ontouchstart' in window) {    /* cache dom references */     var $body = $('body');     /* bind events */    $(document)    .on('focus', 'input', function() {        $body.addClass('fixfixed');    })    .on('blur', 'input', function() {        $body.removeClass('fixfixed');    });}

The solutions on the top are some ways to go and fix the problem, but I think adding extra css class or using moderniz we are complicating things.

If you want a more simple solution, here is a non-modernizr non-extra-css but pure jquery solution and work on every device and browsers I use this fix on all my projects

if ('ontouchstart' in window) {    $(document).on('focus', 'textarea,input,select', function() {        $('.navbar.navbar-fixed-top').css('position', 'absolute');    }).on('blur', 'textarea,input,select', function() {        $('.navbar.navbar-fixed-top').css('position', '');    });}

I had a similar problem, but I found a workaround by adding the following css class to the body element on input focus and then removing it again on unfocus:

.u-oh {    overflow: hidden;    height: 100%;    width: 100%;    position: fixed;}