My attempts to adjust the data-offset for scrollspy seem to have no effect. Below, you can find the relevant snippets of HTML, CSS, and JS:
HTML
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>YOUNG'S PORTFOLIO</strong></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right enlargeItem">
<li><a href="#aboutBox">ABOUT</a></li>
<li><a href="#portfolioBox">PORTFOLIO</a></li>
<li><a href="#contactBox">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
CSS
body {
background-color: gray;
padding-top: 110px;
data-spy='scroll';
data-target='.navbar';
data-offset='';
position: relative;
}
JS
$('body').scrollspy();
Although the scrollspy functionality correctly highlights list items when scrolling to designated areas (#aboutBox, #portfolioBox, #contactBox), I found that the alignment was slightly off. Despite my efforts to modify the data-offset attribute, it does not yield any changes.
If you would like to view the complete code, please visit this CodePen link.