Então, eu tenho essa página única que consiste em algumas seções. Os usuários podem acessar essas seções rolando-se ou clicando na barra de navegação (um href com âncora). Devido à barra de navegação do Bootstrap 4 ser fixada na parte superior, o conteúdo é colocado embaixo dela. Existe uma maneira de compensar as âncoras em -54px, para que sempre que eu clicar em um link de âncora, ele mostre o conteúdo abaixo da barra de navegação (X: 54px) e não sob a barra de navegação (X: 0px).

Fiz este codepen para mostrar o problema que estou enfrentando:
https://codepen.io/anon/pen/XEjaKv
Sempre que você clicar em um link âncora, ele será direcionado para a seção, no entanto, a barra de navegação estará cobrindo o texto.

Todas as seções têm 100 alturas de visualização.

SCSS usado:

.container{
  section{
    height: 100vh;
    &#section1{
      margin-top: 54px; // we need to offset the first section by 54px because of the navbar..
    }
    &#section1, &#section3{
      background-color: #ddd;
    }
    &#section2, &#section4{
      background-color:#ccc;
    }
  }
}
html{
  scroll-behavior:smooth;
}