logo

Canvas Palette - Make it Colorful🎨

Canvas Palette - Drag in blocks, drop in a video, add a splash of color - no design degree required.

Demo Palette Download Palette

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

GLightbox is a pure javascript lightbox (Colorbox alternative without jQuery)❗

It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self-hosted videos.

Demo GLightbox Download GLightbox

Scroll
  1. Home
  2. Forums
  3. Drupal CMS
  4. Theming

How do I use Bootstrap scrollspy?

22/02/2025, by Anonymous (not verified)
Forums
Theming

I would like to use Bootstrap's scrollspy plugin in Drupal 8. So I edited the html.html.twig file replacing

<body{{ attributes.addClass(body_classes) }}>

With

<body{{ attributes.addClass(body_classes) }} data-spy="scroll" data-target=".nav-scrollspy" data-offset="50" >

Where .nav-scrollspy is the class of my navigation block. Additionally I added the following JavaScript to my theme:

$('body').scrollspy({ target: '.nav-scrollspy' });

But as this does not work I were wandering whether or not this plugin is already integrated in Drupals Bootstrap theme. Apparently not, as I could not locate such a file in themes/bootstrap/js/.

Unfortunately I did not find such a file in the web neither, so I am asking my self, where to get it and how to add it to Drupal?

Submitted by mikhail on Sat, 22/02/2025 - 18:49

Permalink

AFAIK your bootstrap theme will be having bootstrap.js or bootstrap.min.js included. Generally, scrollspy plugin related code will be inside these files.

So try to recheck whether you have added nav-scrollspy to your div element. I think you might need to have 'id' for your div element and a proper link to it.

 

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
</body>

Also in Drupal 8, caching is a bit aggressive so try to rebuild your cache and check again. For better understanding refer http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins/