Bootstrap scrollspy feature experiencing malfunction

I am encountering an issue with scrollspy on Bootstrap version 5.1. Despite following the examples in the documentation (links provided below), I am unable to make it work; there are no visible changes when scrolling.

My goal is for the corresponding link in the navbar to become active as the user scrolls through different sections of the page.

HTML Structure

<body data-bs-spy="scroll" data-bs-target="#navbar">
    ...
    <nav id="navbar" class="menu">
    <ul class="nav flex-column">
        <li class="nav-item active"><a class="nav-link" href="#about">About me</a></li>
        <li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>                
    </ul>
    </nav>
    ...
    <section id="about"> ... </section>
    <section id="skills"> ... </section>
    <section id="services"> ... </section>
    <section id="projects"> ... </section>

</body>
htmlcssbootstrap-5scrollspy

Answer №1

It appears that your code is functioning correctly, but the issue lies in the placement of the .active class within the HTML structure. Instead of adding it to the .nav-link anchor tag, it should be added to the .nav-item list item.

Your CSS currently targets the li.active instead of a.active.

.sidebar .nav li a:hover, .sidebar .nav li.active a {
    color: #1d93e4;
    opacity: unset;
}

Please consider using this revised version:

.sidebar .nav li a:hover, .sidebar .nav li a.active  {
    color: #1d93e4;
    opacity: unset;
}

Here is an example demonstrating how to structure the navigation menu with the .active class within the .nav-link:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

https://getbootstrap.com/docs/5.1/components/navs-tabs/#base-nav

Alternatively, you can also structure it like this...

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there an alternative solution to the issue of the jQuery resize() event not triggering when an input is

Despite the fact that the jQuery event resize() should trigger when the width of an input box changes, it seems to be malfunctioning. As per the jQuery API documentation, the resize event is supposed to go to the (window) handler. So my query here is, what ...

javascriptjqueryhtmlajax

Changing webpage content without using asynchronous methods once authentication has been completed using Google Firebase

My goal is to create a website where users can sign in with Google by clicking a button, and then be redirected to a new HTML page. However, I am facing an issue where the Google sign-in window pops up briefly and closes immediately, causing the HTML page ...

javascripthtmlfirebase-authenticationgoogle-authentication

SwiperJS continuously applies additional right margin to every slide

My Swiper carousel seems to be adding an unnecessary 5px margin-right to each slide, resulting in the cards not fitting into one frame. https://i.sstatic.net/fwn5G.png I attempted to fix this by setting the margin-right to 0px for the .swiper-slide class ...

cssreactjssassswiper.js

Is it necessary to have height:0 and width:0 when display:none is already applied?

Is it necessary to include height:0 and width:0 when applying display:none to a class? I've noticed these properties being used in certain instances, could they potentially resolve any issues with compatibility in older browsers? ...

css

What is the correct method for caching fonts within an Angular application?

In the process of developing a web application similar to photoshop-minis using Angular, one key aspect I am focusing on is reducing load times. Particularly when it comes to fonts, as not all necessary fonts are available through Google Fonts. Instead of ...

cssangularcachingbrowser-cachewebfonts

navigate to a different section on the page with a series of visuals preceding it

When I try to navigate to a specific dom element on another page, the page initially works fine but then jumps to somewhere before that element. I believe this issue occurs because the page calculates the position before images load, and once the images ar ...

javascripthtml

Deactivate a div based on a Razor variable in ASP.NET MVC4

Is there a secure method to disable a div based on a Razor variable in ASP.NET MVC 4.0? I attempted using a CSS class, but it was easily bypassed with developer tools. .disableddiv { pointer-events: none; opacity: 0.4; } Any advice on how to effectively ...

jquerycssasp.netasp.net-mvcserver-side-validation

Tips for ensuring a checkbox is ticked before submitting in Bootstrap

I am in the process of creating a form using Bootstrap. I want to ensure that users can only submit the form once they have checked the checkbox.https://i.sstatic.net/piBRA.png <form> <div class="form-group"> <label for=&qu ...

htmlformsbootstrap-5

Converting a string to regular text in JavaScript (specifically in ReactJS)

When I fetch data from an API, sometimes there are special characters involved. For example, the object returned may look like this: { question : "In which year did the British television series &quot;The Bill&quot; end?" } If I save t ...

javascripthtmlreactjsstring

How can I resolve the issue of a lengthy link spanning two lines in Internet Explorer, while displaying correctly in other browsers on a Bootstrap navigation

Currently in the process of developing a responsive website with Bootstrap. The navigation buttons at the top are displaying correctly in Chrome, Safari, and Firefox, but in IE, the button labeled "Public Consultation" is wrapping onto two lines. I suspec ...

javascriptjqueryhtmlcsstwitter-bootstrap

Embedding links in v-bind:href

I inserted a dynamic link inside the <header></header> section using the method mentioned here: Vue JS and appending a variable to end of a URL Below are the relevant codes: <tr class="notice-row" v-for="(myCase, id) in case ...

javascripthtmlvue.js

The controller is referencing $rootScope which has not been properly defined

Here is my understanding of the controller concept. Whenever I launch the application, an error message appears saying "$rootScope is not defined." Can someone provide assistance in identifying the issue? var webadmin = angular.module('PcPortal' ...

javascripthtmlangularjs

(Original) redirect from specific url / url detection New text: "Redirection

Sorry for the long and confusing question, my apologies for wasting your time. I am still learning programming and what I really wanted to ask is "how can I retrieve a GET parameter using JavaScript?" Apologies for any inconvenience. ...

javascriptphphtml.htaccesshttp-redirect

Ways to automatically divide lists into various div elements

Hey there! I currently have a list of categories on my page that is subject to change. I'm looking for assistance in creating a loop that will divide my lists into groups of 5 items per div. For example: foreach($categories as $cat) <label> ...

phphtmlcsslaravel-blade

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...

javascriptjquerycssasp.net

Fade between two elements using jQuery

Can someone assist me with adding a fade effect between elements in my code? Any advice or suggestions would be greatly appreciated! $("#example p:first").css("display", "block"); jQuery.fn.timer = function() { if(!$(this).children("p:last-child").i ...

jqueryhtmlfadeinfadeout

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

csstwitter-bootstrap

Using Jquery and AJAX to insert a PHP file into a DIV container

I am facing a challenge where I need to dynamically load a PHP file into a DIV element upon clicking a button, all without the page having to reload. If you refer to the 'Jsfiddle' document linked below, you will find further details and explana ...

phpjqueryhtmlajax

Creating responsive images in a navbar with HTML and CSS

I need help with this code snippet: <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <div class="d-flex flex-row justify-content-center align-items-center"> <a cla ...

javascripthtmlcssbootstrap-4

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...

htmlcsstwitter-bootstrap