Trying to implement a bootstrap sticky navbar (fixed height of 81px) with smooth-scroll behavior.
The HTML site features section tags, such as <section class="section" id="news">, which works fine in order to jump to certain areas by using <a class="nav-link" href="#news">News</a> in the navbar. I am using the following CSS and JS technologies, loaded right at the beginning of the <body>:
- https://getbootstrap.com/docs/4.6/components/navbar/
- https://github.com/iamdustan/smoothscroll
- https://github.com/jonaskuske/smoothscroll-anchor-polyfill
So far it works: at the bootstrap specific --breakpoint-lg at 992px the navbar collapses into a burger menu. Now in order to compensate for the fixed-height navbar I added the following code to my custom.css (loaded after the bootstrap.min.css of course), according to a trick found at https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
@media (max-width: 991px) {
section {
padding-top: 382px;
margin-top: -382px;
}
}
@media (min-width: 992px) {
section {
padding-top: 80px;
margin-top: -80px;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">This works fine on larger dimensions of the browser window width, but as soon as it’s loaded on smaller width windows (991px and below) – hence on almost all mobile devices – clicking the navbar-link jumps to a point slightly vertically offset. Any ideas why this happens? It seems my media-query for max-width: 991px is being ignored.