Bootstrap fixed navbar blocking content link to on the page - css

Question

I'm using bootstrap 4, and I have a navbar at the top of the screen, fixed-top class, and it works completely fine, except when I link to something on the page.
So if I have an element that I target away down the page in one of the navbar links, using href="#introduction", the page will jump to that section, but the top of the targeted element will be cut off by the navbar. This only seems to happen when I target the element from a dropdown item. I've tried with a normal navbar link and didn't experience this behaviour.
See this fiddle to see what I mean - if you click on the dropdown button, then click "Introduction", you'll see how it's being cut off (cuts off the title of the jumbotron):
<nav class="navbar navbar-expand-md navbar-dark navbar-default sticky-top bg-dark">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Test</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#introduction">Introduction</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p style="margin-bottom:1300px">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
<div class="jumbotron jumbostyle" id="introduction">
<h2>
Hello, world!
</h2>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
<p style="margin-bottom:1300px">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
<div class="col-md-1">
</div>
</div>
</main>
Does anyone have any ideas how to solve this?

Answer 1

You can solve this issue by adding 3 or 4 <br> after
<div class="jumbotron jumbostyle" id="introduction">
This can solve the problem for now.
For the best practices you can check for each class style like jumbostyle to see what exactly casing this issue.
But you can just add 3 or 4 <br> and it will work fine.
Check this : Example

Answer 2

I assume you have control over the content displayed on the page. In that case you can give the content div with the target id #introduction a padding-top with the height of your navbar (about 100px).
<div class="jumbotron jumbostyle" id="introduction" style="padding-top:100px">
To make it even better, you could consider creating a custom class for this styles or using the bootstrap spacing utilities. Please do not add this styles to the #introduction tag!

Answer 3

Found the answer:
Instead of sticky-top, I used fixed-top, then added
body {
padding-top: 70px
}
to the CSS and
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
to the script.
See here: https://jsfiddle.net/ao3b0m95/
Edit: I don't think I need the CSS, just the JS will do the job.