Encountering an issue with the Bootstrap Scrollspy component.
Using a sticky-top navbar and when the nav button is clicked, it scrolls to the correct element;
However, the problem lies in the fact that the sticky navbar overlays this element.
Tried utilizing data-offset = "50" in the body tag, but it had no effect.
Body tag snippet:
<body data-spy="scroll" data-target="#sectionsNav" data-offset="50">
CSS for the body tag:
body {
position: relative;
overflow-y: auto;
}
The navbar:
<nav class="navbar navbar-light bg-light sticky-top">
<div id="sectionsNav">
<ul class="nav nav-pills text-center">
<li class="nav-item">
<a class="nav-link" href="#wihe">What is Home Eats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hiw">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pws">Problems we Solve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#jhen">Join Now!</a>
</li>
</ul>
</div>
</nav>
Section where How it works div is located:
..
<div id="hiw" class="container">
...
..
.
</div>
..
Expected result when clicking on How it works button in the navigation bar:
https://i.sstatic.net/JaL9e.png
Current behavior observed:
https://i.sstatic.net/Y5ztW.png Note: The navbar appears above the How it Works header.
Edit
Following @SMAKSS solution, the scroll worked perfectly. However, another issue arose where the highlighted element in the navbar becomes the previous one.
In the screenshot below, after clicking on How it Works, the correct scroll occurred, but the highlighted navbar element remained as What is Home Eats which is the previous selection. https://i.sstatic.net/4PkaL.png For example, if I click on Problems we Solve, How it Works gets selected instead. It consistently highlights the previous element.
Edit Solution
Solved the secondary issue by doubling the value of the data-offset attribute to 100.
Updated code snippet looks like this:
<head>
<style>
html {
scroll-padding-top: 70px;
}
body {
position: relative;
overflow-y: auto;
}
</style>
</head>
<body data-spy="scroll" data-target="#sectionsNav" data-offset="100">
...
.
</body>