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,

<nav data-offset="54"></nav>

However, in Bootstrap v4, this data-offset attribute is missing, and doesn't work. I've had a look through the v4 docs, and just can't seem to find anything! I've also tried using data-offset and offset attributes, but these don't work either.

Here is the html code of the nav

<nav class="navbar navbar-light bg-faded navbar-fixed-top">
  <button type="button" data-toggle="collapse" data-target="#nav-collapse" aria-controls="#nav-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up">&#9776;</button>
  <div id="nav-collapse" class="collapse navbar-toggleable-sm">
    <ul class="nav navbar-nav pull-md-right">
      <li class="nav-item"><a href="#page-top" class="nav-link page-scroll">home</a></li>
      <li class="nav-item"><a href="#about" class="nav-link page-scroll">about</a></li>
      <li class="nav-item"><a href="#services" class="nav-link page-scroll">services</a></li>
      <li class="nav-item"><a href="#productssolutions" class="nav-link page-scroll">products + solutions</a></li>
      <li class="nav-item"><a href="#contact" class="nav-link page-scroll">contact</a></li>
    </ul>
  </div>
</nav>

How would I go about adding a data offset of 54px? Is there an alternative that could be used, say a simple script tag needing to be added to my html with a few lines of js?

Leiker

What are you trying to do with the nav? In 3.x, data-offset was used by the Scrollspy component (not specifically the navbar), and hasn't really changed in 4.x. – Bennett

When I click the link, I want it to go to the top of the section, which it is, but the nav is covering 54px of the top. So, basically, I want the bottom of the nav to be at the top of each section. – Leiker

The fixed navbar will always cover the top 50px which is why body padding is recommended. – Bennett

@ZimSystem yes, that is true, however I'm wanting the anchor point to be offset by -54px, but it's all okay, I found an answer – Leiker

Answer 1

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.

Leiker

By adding an id to both the <span class="anchor"></span> and <section></section> it chooses the 'top level' anchor. – Leiker

Which is good because it allows for scroll-spy in the nav to work correctly. – Leiker

Answer 2

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

Carroll