Bootscore v6 is here! Learn more

Documentation Theme


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">

<section id="two">

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
    target: '#bootscore-navbar'

  // Refresh Scrollspy
  $('[data-spy="scroll"]').each(function () {


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.


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

2 Comments on “Scrollspy”

  • Arthur Barkhuysen


    Great theme, one question are you planing on removing jQuery from BootScore?

    • Basti


      Hi Arthur,

      thank you very much.

      jQuery is integrated by WordPress, not by bootScore and is used by almost all WP plugins. So, switching to pure JS does not bring any clear advantages and coding becomes much more complicated. The answer is: Not planned yet.

      Hope that helps


Comments are closed.

To top