CODEWITHSUNDEEP
htmltwitter-bootstrapnavbar
Marius
Marius

Reputation: 55

Scrollspy navbar in Bootstrap 5

I am trying to make a navbar that changes the style of a particular navbar link to active as the user scrolls down the page. I am trying to do this using Bootstrap's scrollspy feature.

I checked and there are many comprehensible tutorials on this (e.g. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp or https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3).

Although I believe I followed them to the letter, the effect just does not seem to work. I am afraid this may have to do something with the changes to mechanics of the spyscroll feature due to the abandonment of JQuery by BS5. But it very well may by an error in my code, although I did my best to follow the tutorials to the letter.

My code:

(a) included external files:

<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->

(b) style tag

<style>
 body 
 {
   position: relative;
 }
</style>

(c) body tag

<body data-spy="scroll"  data-target="#navbarko">

(d) navbar tag

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
 <div class="container">
  <a class="navbar-brand" href="#"><img src="logo.png"/></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#mission">Our mission</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#debt">Debt</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#finadv">Finland</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#references">References</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

(e) beginning of the section tags throughout the page:

<section class="feature grad_third" id="mission">

<section class="feature grad_third" id="debt">

<section class="feature grad_third" id="finadv">

<section class="companies references" id="references">

<section class="feature grad_third" id="contact">

Many thanks beforehand for your time and help.

Upvotes: 0

Views: 2841

Answers (1)

Marty
Marty

Reputation: 212

Things have changed slightly in Bootstrap 5 - and the W3Schools tutorial is Bootstrap 4.

So you need to change your body tag to (note the 'bs', for Bootstrap):-

data-bs-spy="scroll"

More on this here:- https://getbootstrap.com/docs/5.0/migration/#javascript

Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

Upvotes: 1

Related Questions