I've been working on creating my own personal landing page using HTML, consisting of three sections. I have successfully implemented the functionality where these sections are reachable through links on a navigation bar. However, I encountered an issue where the link highlighting does not reflect the current part of the page when scrolling. Instead, it remains stuck at the default position set in the HTML.
If you want to take a look at my code and preview the page, you can find it here. Notice how the blue highlight doesn't update as you scroll through different sections of the page.
Here is the body declaration:
<body data-spy="scroll" data-target="#spy" data-offset="70">
And this is how my navigation bar is set up:
<!-- Navbar -->
<nav id="spy" class="navbar fixed-bottom navbar-light bg-light">
<a class="nav navbar-brand" href="#"></a>
<ul class="nav nav-pills">
<li class="nav-item"> <a class="nav-link active" href="#about_me"> about me></a> </li>
<li class="nav-item"> <a class="nav-link" href="#portfolio"> portfolio </a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact_me"> contact me </a> </li>
</ul>
</nav>
As for the rest of the content:
<div class="bg-light p-3 rounded">
<p id="About_Me"> Cat ipsum dolor sit amet... </p>
...Despite following similar implementations that worked before and troubleshooting online resources, I still face the issue of link highlighting not updating while scrolling through the page. Can somebody provide insights on how to resolve this problem?