Offset Scroll Anchor in HTML with Bootstrap 4 Fixed Navbar

Offset scroll anchor in HTML with Bootstrap 4 fixed navbar

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

Fixed Headers and Section Anchors with bootstrap

I found a solution! I refactored the code in the ABOUT section to this:

<!-- ABOUT -->

<div class="blank" style="position: absolute">

  <a id="myanchor"></a>

</div>

<section id="about" class="section2">

  <div class="row-fluid">

    <div class="row">

      <div class="card ">

        <div class="card-block">

          <div class="card-title">

            <h1>Welcome, <a href="#">let's talk!</a></h1>

          </div>

          <div id="container">

            <p> I started independent web development two years ago, and haven't looked back. A              couple of things I love about coding are those moments when tough projects are                  complete, or discovering a solution to a difficult problem. Take a look at my

              <a href="#skills">skills</a>, and some of my recent <a                                         href="#projects">projects</a>. THANKS!

            </p>

            <a href="General_Resume.pdf" class="btn btn-outline-primary" target="__blank">Print              My Resume</a>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

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

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.

Bootstrap anchor offset issue

Try wrapping an <a> around the element you want to skip to, like this answer suggests - e.g.

<a href="#nav">Jump to nav</a>

<a id="nav">
    <h1 style="padding-top: 50px; margin-top: -50px;">Test</h1>
    <!-- Offsets the fixed navbar -- just an example, this should be in CSS -->
</a> 

Correcting in page navigation position when using fixed navbar

On click of a link, I set the padding top of the body to 0, and on hash change event after the page positions on the section relative to the inline link, I set back the padding to 65.

$('.nav-link').click(function () {
        $('body').css('padding-top', '0');
});

window.onhashchange = function () {
    $('body').css('padding-top', '65px');
};

---

Related Topics