Bad display of errors messages [on hold]

I have encountered a problem while trying to display HTML5 error messages when submitting a form as shown in this screen shot:

The dark gray bar on top is my navigation bar.

The problem is that my form is a little long, so you have to scroll down to confirm. However, if one has not filled out a field that contains a required tag, the page will automatically slide up to show the error message. The problem is that the error message covers my navigation bar which holds a field for filling in the required information.

I'd like for my page scroll a little further so that both the navigation bar and error message are visible.

I also use bootstrapping.

Code from the comment below:

var animate = true;
$( "input,select,textarea" ).bind( "invalid", function() {
    console.log('Invalid');
    var offset = $(this).offset();
    offset.top -= 200;
    if (animate) {
        animate = false;
        $('html, body').animate({ scrollTop: offset.top }, 10, function() {
            animate = true;
        });
    }
}); 

Thank you in advance,