Add offset to Smooth Scroll in Bricks (for Anchor Links)

Below is the CSS code you can copy and paste into your website to add an offset to the Smooth Scroll feature in Bricks.

The code is as follows:

/* change scroll offset because I have a sticky header now */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 130px;
}
/* adjust scroll offset for mobile header */
@media( max-width: 767px){
    html {
        scroll-padding-top: 80px;
    }  
}
Code language: PHP (php)

This code is taken from my own website and I added it so that my Sticky Header didn’t hide headings when I clicked to go to them from my Table of Contents block.

The Video Tutorial

Here is a video that explains how and where to add the above CSS code to your Bricks website.