The scrollspy feature in Bootstrap 5 fails to highlight the correct sections

Despite following the steps, my scrollspy is not highlighting. What could be the issue?

I have replicated the HTML and CSS codes directly from getbootstrap.com.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908c908d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f5453545241500d49434f4e5360110e11100e12">[email protected]</a>/font/bootstrap-icons.css">
  <title>UNITAYLE</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fde6fae6fb">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h255rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</head>
<style>
    html {
    scroll-padding-top: 100px; /* height of sticky header */
    }

    .unires {
        /* Full height */
        height: 18rem;
        object-fit: cover;
        width: 100%;
    }

    .nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-

    // Rest of your code here..

I followed the Bootstrap 5 scrollspy guide meticulously but unfortunately, the highlight feature isn't working as expected.

htmlcssbootstrap-5scrollspy

Answer №1

Your Bootstrap package is not functioning properly. If you inspect your browser's JavaScript console, you will notice an integrity check issue indicating that the bootstrap variable cannot be located.

To resolve this problem, consider using the following script instead:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffae1fde1fc">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

In addition, it is advised to eliminate the redundant Bootstrap import under the <title> tag.

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

What is the best way to enhance a tool-tip with images or legends?

Currently, I have implemented a tool-tip feature which works for a text box. However, the issue is that users are unaware of the presence of the tool-tip for the text box until they hover over it. My question is, how can I make it more obvious to users t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing jQuery to apply a class to an element and modify the CSS parameters with custom values simultaneously

Unsure if this idea is feasible, but I'll attempt to explain my requirements. I am interested in accomplishing something like the following: A CSS class with variables X, Y, and Z left undefined: .r {border-radius:Xpx;-webkit-border-radius:Ypx;-moz ...

jquerycss

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

The issue: Upon page load, some images are still processing and not displaying (even though the image URLs are known). The resolution: To address this problem, a customized directive was developed to showcase a loading spinner as a placeholder until the i ...

javascripthtmlangularjsinternet-explorer

"Utilizing HTML aids for creating text input fields and adding line breaks

public string BannerText {get;set;} public void SetBanner() { BannerText = "This is line 1. \nThis is line 2." } on my webpage, I am displaying it like this: <div> <h1><%: Model.BannerText %></h1> </div> The issue ...

c#asp.nethtmlhtml-helperline-breaks

The element 'Listitem' is unrecognized and cannot be found in the current context

I am currently working on an ASPX project in Visual Studio and have encountered an issue with a Drop Down field. It appears that the List Items are being ignored in my code. Can anyone advise me on what might be missing? <form runat="server"> &l ...

htmlasp.netvisual-studio

Mastering the art of selecting checkboxes and Font Awesome icons with JQuery

I find selecting elements using JQuery by their ID or classname quite challenging and it's a bit outside of my expertise. When a function is called, I would like to apply the following styles: .classname input[type="checkbox"] ~ i.fa.fa-circle-o { ...

javascriptjquerycsscheckboxfont-awesome

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

How to create an HTML hyperlink in CakePHP version 2.2.1 and above?

Is there an easy way to create an HTML link using the HtmlHelper class in CakePHP 2.2.1? Let's say I have a route set up that maps /finest-perfumes-ever-2012 to the Perfumes/Index Controller/Action. I want the generated link to be: somedomain.com/f ...

htmlcakephphyperlinkhtml-helpercakephp-2.2

Learn the process of including an active class using jQuery from an external active.js file!

This JavaScript code snippet $(function() { $("#navbar-nav li").click(function($) { // remove classes from all $("li").removeClass("active"); // add class t ...

phphtmljquerybootstrap-4

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

Attempting to align three sections horizontally

I'm having trouble with my current HTML code and I can't seem to figure out what the issue is. As a beginner in HTML, I am struggling to understand. My goal is to have three columns: one on the left taking up 20% of the space, one in the center t ...

csshtml

Should the refresh button be displayed once the animation finishes?

Can anyone provide guidance on how to write jQuery code that will reveal a hidden button after an animation is finished? The button should also be able to refresh the animation for the user to watch again. Check out this fiddle: http://jsfiddle.net/rabela ...

jquerycssanimationjquery-animate

Utilizing the Download Attribute in HTML 5 with iPhone Devices

Is there a way to download and view files such as PDFs, Word docs, and JPGs on an Ionic progressive web app without leaving the current page? I've tried using the html5-Download attribute on Android, but it doesn't work properly on iPhone. Any su ...

angularhtmlionic2

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

The href link does not direct to the main landing page

Clicking on the 'Visit website' button does not redirect me to home.html. Instead, it does nothing. How can I fix this issue? Any help would be appreciated. Preview.prototype = { create : function() { // Creating the Preview structur ...

javascripthtmlhrefhttp-redirect

Centered Tailwind CSS logo design

Here is my current fiddle: https://jsfiddle.net/w5c36epd/ Upon close inspection, you may notice that the logo is not properly centered. I have experiment with various flexbox options such as: <div class="flex-shrink-0 justify-center"> ...

csstailwind-css

Can someone point me in the direction of the app.css file within DurandalJS that controls the modals

I am currently facing an issue with implementing a modal in my app using the DurandalJS (SPA) framework. The modal is not displaying correctly, as it opens without a blockout and stretches horizontally across the entire browser. (I expect "Feeds", the "Ne ...

javascriptcssdurandal

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

Changing the height using JQuery UI resizable() can also affect the width during resizing

Having an issue with resizing here. Using the JQuery .resizable() on a div with specific css: div#resizable { float: left; border: solid 1px white; box-shadow: 0px 0px 0px 1px #F2F2F2; box-sizing: border-box; padding: 15px; } This div cont ...

jquerycssjquery-uiresizablejquery-resizable

Reposition picture "overlays" additional HTML components

I am struggling with rotating an image by clicking on a button as the image overlaps the buttons. Can anyone provide guidance on how to achieve this without overlapping? For reference, here is my code and an example: here (http://jsfiddle.net/jj03b17n/5/) ...

javascriptjqueryhtmlcssrotatetransform