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