title: Fixed header hiding error messages
body: <p>I'm having an issue where I have a fixed header on forms. when someone goes to submit that form, and that form has fields that aren't filled out correctly, the error message gets hidden by the fixed header which is floating above it.</p>
  
  <p>Attached is a jsfiddle better describing the issue. Do not fill any fields in, just scroll down and press submit, and you will notice an error message appears above the fixed header, but the field is hidden</p>
  
  <p>is there any way to offset the header for focuses like this?</p>
  
  <p><a href="http://jsfiddle.net/sD6Rk/" rel="nofollow">http://jsfiddle.net/sD6Rk/</a></p>
  
  <p>Here is the code from the fiddle:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="header"&gt;&lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
      &lt;form action="#"&gt;
          &lt;label for="one"&gt;One&lt;/label&gt;
          &lt;input type="text" required="required" id="one" name="one" /&gt;
  
          &lt;label for="two"&gt;two&lt;/label&gt;
          &lt;input type="text" required="required" id="two" name="two" /&gt;
  
          &lt;label for="three"&gt;three&lt;/label&gt;
          &lt;input type="text" required="required" id="three" name="three" /&gt;
  
          &lt;label for="four"&gt;four&lt;/label&gt;
          &lt;input type="text" required="required" id="four" name="four" /&gt;
          &lt;p&gt;scroll down for submit button&lt;/p&gt;
          &lt;input type="submit" value="submit" id="submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>body, html {
      margin: 0;
      padding: 0;
  }
  
  input, label {
      display: block
  }
  
  .container {
      height: 1500px
  }
  
  .wrapper {
      padding-top: 200px
  }
  
  .header {
      height: 200px;
      position: fixed;
      background: red;
      width: 100%;
  }
  
  #submit{
      margin-top: 500px
  }
  </code></pre>