Offset scroll anchor in HTML with Bootstrap 4 fixed navbar

you can use jQuery to override the default behavior so you don't have to change the layout ( margin, padding .. etc.)

  var divId;

  $('.nav-link').click(function(){    
    divId = $(this).attr('href');
     $('html, body').animate({
      scrollTop: $(divId).offset().top - 54
    }, 100);
  });

https://codepen.io/anon/pen/NYRvaL

This elegant CSS 1-liner solution worked nicely for me:

html { scroll-padding-top: 125px; }

My navbar height is 125px

There are a few different ways to solve it, but I think the best way is to put a hidden pseudo element ::before each section. This is a CSS only solution, no JS or jQuery...

section:before {
    height: 54px;
    content: "";
    display:block;
}

https://www.codeply.com/go/J7ryJWF5fr

That will put the space needed to account for the fixed-top Navbar. You'll also want to remove the margin-top offset for #section1 since this method will work consistently for all sections and allow the scrollspy to work.

---

Related
How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?
Href Jump with Bootstrap Sticky Navbar