Agency template - bug 1st anchor link remains active

How to reproduce:

  1. Open the template Agency
  2. Set to Bootstrap 5.2 (default)
  3. Open Preview
  4. Click any other anchor link than the 1st (= SERVICES)
  5. Notice how SERVICES remains active (yellow), altho it should turn yellow off for SERVICES and turn yellow on for the anchor link you clicked.

Example, where I’ve clicked on About:

This post may shed some light. I posted a link to a discussion on Github about Bootstrap 5.2 and scrollspy that you may want to read.

I see… So it’s a non-solved bug in Bootstrap 5.2 regarding Scrollspy. Bummer.
I’ve noticed when opening the template as Bootstrap 4.6 - all is fine indeed.

Since my project is already saved as Bootstrap 5.2, and appears to be locked, there’s no way to change it to back to Bootstrap 4.6.

Can I somehow copy/paste my original project in total into a new Bootstrap 4.6 Agency template?


Je kunt je eigen scrollspy maken
Verwijder op de body-tag de attributen:
Voeg dit script toe aan een javascript-bestand

(function () {
  'use strict';
  // constants
  const sections = [...document.querySelectorAll('section[id]')];
  const menuLinks = [...document.querySelectorAll('.nav-item a')];
  const navoffset = document.getElementById('mainNav').clientHeight;
  const navToggle = document.querySelector('.navbar-toggler');
  // Scrollspy handler
  const scrollHandle = () => {
    const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    menuLinks.forEach((link) => link.classList.remove('active'));
    sections.forEach((section) => {
      const offset = section.offsetTop - navoffset;
      if (offset <= scrollPosition) {
        menuLinks.forEach((link) => link.classList.remove('active'));
        const target = document.querySelector(`a[href="#${}"]`);
        if (!target.hash) return;
        if (target.parentElement.classList.contains('dropdown-menu')) {
        if (document.querySelector('#navbarResponsive').classList.contains('show'));

  // event listeners
  document.addEventListener('scroll', scrollHandle, false);
  document.addEventListener('resize', scrollHandle, false);
  document.addEventListener('readystatechange', scrollHandle, false);

Nu heb je een scrollspy die werkt zoals het werkte voordat Bootstrap hun scrollspy veranderde in 5.2

1 Like

Thanks (dank je!) , ik ga dit vanavond proberen en laat het je weten wanneer het gelukt is :grinning:

@kuligaposten Works perfectly:
And easy workaround, thank to you :+1:

1 Like