As I work on my website, I am attempting to implement a scrollspy with Bootstrap 4. Unfortunately, it seems that the functionality is not working as expected. I suspect that the issue lies within the classes and selectors I have utilized. Interestingly, when I hover over an element, the hover effect works perfectly fine. However, the problem arises when I attempt to scroll.
.navbar {
margin-bottom: 0;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #17a2b8 !important;
background-color: #fff !important;
}
body {
position: relative;
}
The HTML structure of the site:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-info">
<a href="/" class="navbar-brand">Bootstrap 4</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Codeply</a>
</li>
</ul>
</div>
</nav>
</body>
I suspect that the issue may be related to the nav-bar li a selectors.