2

I have a navbar with links to a article with id="about", but my navbar is fixed-top, so when I click on the link, my navbar is in front of the title of the section.

I solved this problem by using this: <span id="about" class="anchor"></span> 

.main-content article .anchor{ 
    position: absolute;
    top: -106px;
}

But for scrollspy I need the href of the link to be the same as the id of the section where I want to "scrollspy" but I can't use the same id twice.

How can I solve this? Is there a way to go to add -100px to your href or something like that?

Turnip
  • 35,836
  • 15
  • 89
  • 111
Robert
  • 111
  • 1
  • 9
  • 1
    [Use the offset option](https://getbootstrap.com/docs/4.0/components/scrollspy/#options). Detailed on the scrollspy page. Did you read this? – Alex May 28 '19 at 14:51
  • Possible duplicate of [How do I set the offset for ScrollSpy in Bootstrap?](https://stackoverflow.com/questions/9288482/how-do-i-set-the-offset-for-scrollspy-in-bootstrap) – APAD1 May 28 '19 at 14:51

3 Answers3

0

You can add a 'false' anchor like this above your about content:

<div style="margin-top: -95px; position: absolute;" id="about"></div>

This will add a margin to your section above and after some adjustment you can change the px value to suit your situation.

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
0

You can try with jquery like this:

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
      var target = $(this.hash);
      $('html, body').animate({ scrollTop: target.offset().top-100 }, 1000);
  }
}
AdityaSrivast
  • 1,028
  • 1
  • 10
  • 16
0

I had this problem as well, I found it easy to just place an anchor tag above where you want to jump to and then add scroll-margin-top to my CSS with a value.

#jumpto {
    scroll-margin-top: (insert value here);
}
<nav>
    <ul>
        <li><a href="#jumpto">Nav Link</a></li>
    </ul>
</nav>

<a id="jumpto"></a>
<section>
    <h2>
        This is where I want to jump to but the stupid navbar is in the way!
    </h2>
</section>
Troy
  • 1