Entonces, tengo esta página única que consta de algunas secciones. Los usuarios pueden ir a estas secciones desplazándose o haciendo clic en la barra de navegación (un href con ancla). Debido a que la barra de navegación Bootstrap 4 se fija en la parte superior, el contenido se coloca debajo de ella. ¿Hay alguna manera de compensar los anclajes por -54px, de modo que cada vez que haga clic en un enlace de anclaje, se muestre el contenido debajo de la barra de navegación (X: 54px) y no debajo de la barra de navegación (X: 0px).

Hice este codepen para mostrar el problema que estoy enfrentando:
https://codepen.io/anon/pen/XEjaKv
Cada vez que hace clic en un enlace de anclaje, lo llevará a la sección, sin embargo, la barra de navegación cubre el texto.

Todas las secciones son 100 viewheight.

SCSS utilizado:

.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;
}