How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?

Question

So, in Bootstrap v3, you would just add a data-offset attribute to the nav tag, with the pixel offset, in this case 54px,

Answer 1

You could add padding-top in every section you are referring to.

<a href="#section1">Section 1</a>
...
<section id="section1" class="pt-5">
   <!-- section text -->
</section>

If the padding isnt big enough, you can add your own class

.section-anchor-padding { padding-top: 54; }

Answer 2

So the way I ended up fixing it was by adding a separate element on top of each of the sections;

<span class="anchor" id="SECTION"></span>
<section id="SECTION" REST OF SECTION HERE>
    ....

The id in the section element is to allow for scroll spy to work correctly.

and by adding this to my css file;

span.anchor {
    margin-top: -54px; /* height of nav, in this case 54px */
    display: block;
    height: 54px; /* height of nav, in this case 54px */
    visibility: hidden;
    position: relative;
}

and then, hey presto! It worked, and one nice thing about this solution is that it doesn't affect anything visually, it just changes the anchor point.