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

By Grant Ambrose

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.

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

Leave the first comment

Not sure where to start?

Get my FREE 30-day Course:

QUICK-WINS for Solopreneurs using WordPress to grow their Online Business

The aim of this course is to help Solopreneurs like YOU overcome some of the most common problems you will face when trying to create, manage and update your Business’ WordPress website.

A QUICK-WIN is something you can go and implement into your website TODAY and see improvements instantly.

Each lesson is aimed at helping you overcome 1 headache associated with managing your WordPress website.

The perfect course for Solopreneurs building an Online Business with WordPress

Get Access Now
Some of my best tips and tricks!