Scrollspy

Enhance navigation with Bootstrap Scrollspy in the navbar, dynamically highlighting active sections as users scroll through your webpage.

Click navbar # links to scroll to sections.

HTML Markup

Set up a page, fill it with content, and assign each part a unique ID. Scrollspy requires resolvable IDs:

<section id="one">
  Content
</section>

<section id="two">
  Content
</section>

In the backend, navigate to Appearance > Menus and add Custom Links:

• https://mydomain.com/#one
• https://mydomain.com/#two

Activate Scrollspy

Scrollspy needs to be activated and assigned to the elements. This example spies on the .entry-content (page content) and highlights the menu-items in #bootscore-navbar (main-nav):

jQuery(function ($) {

  // Activate Scrollspy
  $('.entry-content').scrollspy({
    target: '#bootscore-navbar'
  });

  // Refresh Scrollspy
  $('[data-spy="scroll"]').each(function () {
    $(this).scrollspy("refresh");
  });

});

Code goes to child-theme’s custom.js. The refresh snippet is only needed when adding or removing something from the DOM, for example an Isotope.

Navbar

Clicking a nav-link closes the collapsed offcanvas navbar automatically.