2

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?

  • 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. – Carol Skelly Sep 20 '16 at 13:34
  • 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. –  Sep 21 '16 at 02:44
  • The fixed navbar will always cover the top `50px` which is why [body padding is recommended](http://getbootstrap.com/components/#navbar-fixed-top). – Carol Skelly Sep 21 '16 at 13:48
  • @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 –  Sep 21 '16 at 13:49

2 Answers2

4

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.

  • By adding an id to both the `` and `
    ` it chooses the 'top level' anchor.     –  Sep 22 '16 at 01:21
  • Which is good because it allows for scroll-spy in the nav to work correctly. –  Sep 22 '16 at 01:21
0

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; }
Buksy
  • 11,571
  • 9
  • 62
  • 69