Bad display of errors messages

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.

Thank you in advance,