title: Offset scroll anchor in HTML with Bootstrap 4 fixed navbar
body: <p>So, I have this single page that consists of a few sections. Users can go to these sections by scrolling themselves or clicking in the navbar (a href with anchor). Due to the Bootstrap 4 navbar being fixed to the top, the content gets placed under it. Is there a way I could offset anchors by -54px, so that whenever I click on an anchor link, it would show the content below the navbar (X:54px) and not under the navbar (X:0px).</p>
  
  <p>Made this codepen to show the problem I'm facing:<br>
  <a href="https://codepen.io/anon/pen/XEjaKv" rel="noreferrer">https://codepen.io/anon/pen/XEjaKv</a><br>
  Whenever you click an anchor link, it will take you to the section, however, the navbar is covering the text..</p>
  
  <p>All sections are 100 viewheight.</p>
  
  <p>SCSS used:</p>
  
  <pre><code>.container{
    section{
      height: 100vh;
      &amp;#section1{
        margin-top: 54px; // we need to offset the first section by 54px because of the navbar..
      }
      &amp;#section1, &amp;#section3{
        background-color: #ddd;
      }
      &amp;#section2, &amp;#section4{
        background-color:#ccc;
      }
    }
  }
  html{
    scroll-behavior:smooth;
  }
  </code></pre>