Currently, I am implementing Bootstrap 4, with a fixed-top navbar at the top of the screen. Everything works perfectly fine, except for one issue when linking to elements on the same page.
When I target an element further down the page from one of the navbar links using href="#introduction", the page jumps to that section, but the top of the targeted element gets cut off by the navbar. This problem only occurs when targeting the element from a dropdown item. I have tested with a normal navbar link and did not encounter this behavior.
To see exactly what I mean, please check out this fiddle - click on the dropdown button, then select "Introduction" to observe how the title of the jumbotron is cut off:
<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>
Seeking advice from the community on how to resolve this issue. Any ideas are welcome!