title: Wordpress admin-bar is overlapping my content?
body: <p>I've struggled with this issue for a while and I've decided to ask if there is a more robust fix than what I currently have in place. I've seen many different fixes for this issue, some infinitely more complex than the next. But I don't see why it has to be so difficult?</p>
  
  <p>I've tackled the issue with the following solution;</p>
  
  <p><strong>HTML - (header.php)</strong></p>
  
  <pre><code>&lt;div id="site-wrapper" class="&lt;?php if ( is_admin_bar_showing() ) { echo 'admin-step'; } ?&gt;"&gt;
      &lt;!-- My site navigation --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.admin-step {
      margin-top: 32px !important;
  }
  @media screen and (max-width: 782px) {
      .admin-step {
          margin-top: 46px !important;
      }
  }
  </code></pre>
  
  <blockquote>
    <p><em>Is there a real Wordpress solution to this issue?</em></p>
    
    <p><em>Or alternatively, is there a standardised way to correct this issue?</em></p>
  </blockquote>