What could be causing the malfunction of BS4 Scrollspy?

I'm having trouble with implementing Bootstrap 4's Scrollspy feature. Despite going through the BS4 documentation and watching a Scrollspy tutorial on YouTube, I still can't seem to get it to work properly. Currently, I am using a CDN for BS4's CSS and JS files. You can view my code on CodePen here: https://codepen.io/James-Goodwin/pen/QYpePq

<body data-spy="scroll" data-target="#responsiveNav" data-offset="50">

  <header id="home">
    <!--Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a href="index.html" class="navbar-brand"><!--<img src="img/ShadeSetters-logo.png" alt="Shade Setters logo">-->ShadeSetters</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNav">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="responsiveNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#content1">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#content2">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#content3">Testimonials</a></li>
          <li class="nav-item"><a class="nav-link" href="#content4">FAQ</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section id="content1" class="container-fluid bg-success" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content2" class="container-fluid bg-warning" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content3" class="container-fluid bg-primary" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content4" class="container-fluid bg-danger" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>
</body>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Seems like everything is working correctly. Did you remember to include jQuery and Bootstrap Bundle?

Make sure to view the snippet below in full screen. I have added more content to each section for better clarity.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<body data-spy="scroll" data-target="#responsiveNav" data-offset="50">

  <header id="home">
    <!--Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a href="index.html" class="navbar-brand"><!--<img src="img/ShadeSetters-logo.png" alt="Shade Setters logo">-->ShadeSetters</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNav">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="responsiveNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#content1">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#content2">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#content3">Testimonials</a></li>
          <li class="nav-item"><a class="nav-link" href="#content4">FAQ</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section id="content1" class="container-fluid bg-success" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi... [Truncated for brevity]

Answer №2

Your Codepen project is missing the Bootstrap JS necessary for the Scrollspy component to function properly. It is important to note that the .active class should be defined in CSS rather than using the :active state.

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #59abe3;
}

Check out this version on Codeply:

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

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

I am dynamically creating an editable div using the code snippet below. <div class='reflection-field' contenteditable="true" data-number="${index}"></div> Expected Outcome: When I click on the generated div, I anticipate that the c ...

javascriptjqueryhtml

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Is there a way to select a specific value using Excel VBA? <div class="drpCompanies"> <select class="selectBox homepage selectCompanies" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px"> <op ...

htmlexcelvba

Two dynamic divs positioned next to a div with a set size

I am struggling with the layout of placing two fluid divs next to one that has a fixed size. Let me show you a picture to better illustrate my issue: #menu has a fixed width; #owl takes up 60% of the wrapper; #right menu takes up 40% of the wrapper. Fo ...

htmlcssresponsive-design

Rating of displaying an undefined value (NaN)

I'm having issues with creating a currency conversion calculator, as the result is showing as NaN. Can anyone offer assistance? I've tried multiple solutions but have been unable to resolve it. Check out the following JavaScript code snippet: c ...

javascripthtmlfetch-api

Tips for incorporating a dynamic CSS style sheet into a standalone xhtml document

I am faced with the task of incorporating two CSS classes into a single xhtml. For instance: Take, for example, display.xhtml, which will be utilized by two different applications, each requiring its own CSS styling. This means that if display.xhtml is ...

htmlcssxhtml

Is there a way to identify the specific cell I've modified using bootstrap dataTables?

Working with editable bootstrap datatables, I am looking to update the mySQL database when a cell is edited: index.php: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.11/ ...

phpmysqlajaxtwitter-bootstrapdatatables

"Stay entertained with a captivating animated gif that appears when you refresh the

I just implemented this code snippet to enable animated gifs to work after refreshing a webpage. It's functioning properly in Chrome, Safari, and Internet Explorer except for Firefox. Can someone please offer assistance? jQuery: $(img).css("backgrou ...

javascriptjqueryhtmlcssanimated-gif

Showcasing Wordpress blog entries on another webpage

Struggling with understanding how to showcase posts from a Wordpress blog on a website? You're not alone. Imagine you have a website www.site.com and a blog structured in Wordpress located at www.site.com/blog. Your task is to feature the recent post ...

phphtmlwordpress

vertical alignment, almost there

Is there a way to align a block of text so that the top of the first line is positioned 50% down from the top of the td element? Imagine this scenario, where the top of the first row is exactly at the 50% mark. -------------- | | | ...

htmlcss

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Having some trouble setting up Angular with SCSS and Bootstrap. When attempting to run ng serve, I encountered the following error: ./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ...

cssangularsassbootstrap-5

Utilizing CSS Scroll-snap for Seamless Navigation

Attempting to create a basic carousel using scroll-snap, but encountering an issue where the carousel is randomly scrolling on load instead of starting with the first picture. See code snippet below. Any ideas on resolving this? .carousel { ...

htmlcss

Utilizing Regular Expressions in Vb.net for extracting telephone numbers

I have developed a code to extract mobile numbers from a web link. I have three links in a list box and I am extracting their source code using the following code. However, when I try to use RegEx to Extract Phone Numbers, I keep getting the same number re ...

htmlregexvb.nethtml-agility-pack

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

csshtml

Enhance your website's visual appeal with the Bootstrap-4 album card display feature that

I was inspired by the card concept found at https://getbootstrap.com/docs/4.0/examples/album/ to create a similar layout. However, I don't want to display all my cards at once as it could overwhelm viewers with 100 cards. Has anyone developed a JavaS ...

bootstrap-4

Selenium tactics: patiently awaiting the arrival of a specific element

I am fairly new to Selenium, so please bear with me as I ask some potentially simple questions. Lately, I've been exploring ways to make Selenium wait until a specific element is fully loaded within a pop-up <div>. My goal is to scroll down to c ...

pythonhtmlselenium

Tips for detecting HTML updates using Python requests

My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...

pythonhtmlhttppython-requestspython-requests-html

Utilizing Ajax to dynamically update the color of a button when it is clicked from a different device

Currently, I am developing a program for my own use within my local community theater. The setup will involve a computer in the control room (Sound Booth) and another computer backstage. My plan is to create a grid of around 10 interactive "buttons" on th ...

phphtmlmysqlcssajax

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs. If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz ...

jqueryhtmlcssjquery-animatecss-float

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

Having trouble retrieving the ID of the clicked element in AngularJS?

I have successfully implemented a function in angularjs to retrieve the id of the clicked element. Below is my code snippet html <a href="#faqinner/contactform" class="clearfix" ng-click="getCateId($event)" id="{{option.id}}"> <span class= ...

javascripthtmlangularjs