Published on 07/16/2021
Help Article Plugins
Patrick Watertor
Leiout Developer


Bootstrap 4 has its guide here.


Add to the scrollable element (almost always the body tag):

Screenshot 2021-06-09 162924.png

You must have:

  • Container class the same as your body “data-target”. In this case, it’s “scrollspy”
    An LI tag surrounded by an A tag
    An A tag with an anchor link on it

When you scroll to that point the class “active” is added to the nav-link node. You can add CSS to make the active class look different. The body should have the class “position: relative;” as indicated in the scrollspy documentation. To add an offset add data-offset = 70 for a 70px offset. Default is 50px. Do this to the body.


The required utils.js is already included in Leiout, so no need to add any additional code!

Data-offset doesn’t do what you think it does. It controls how far the page scrolls up to the element before it adds the “active” class. If you want to offset the scroll point, do this with padding.

Lottie Animations

26, Feb 2023
Help Article
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design
Google Translate

This article explains how to install and use Google's translate javascript library and implement a b...

20, Sep 2021
Help Article
Mix Blend Mode

This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...

06, Aug 2021
Help Article Design