Adding Offset When Smooth Scrolling to Section IDs in Oxygen

When building a one-page website or long landing pages, it’s common to have a sticky header with hash links that scroll the user to different sections of the page. The problem is the sticky header covers the top part of the section, so we need to add an offset.

There isn’t an offset setting in Oxygen, but when we’re hash linking to sections in Oxygen we can do some CSS trickery to account for the sticky header.

Live Demo

Note – if you’re wishing to smooth scroll to individual elements and need a specific offset amount in px, use the Page Scroll to ID plugin.

How to Apply

Instead of adding an offset, which would change the amount of px that the browser scrolls, we instead adjust where the start of each section is, while keeping everything visually the same.

We do this by adding an invisible border to the top of each section, then use negative margins to bring the section back into the correct position visually on the page.

Next, we use background-clip to ensure that the section background isn’t bleeding into the border.

The final CSS to add to a stylesheet looks like this..

body:not(.oxygen-builder-body) .ct-section {
    background-clip: padding-box;
    border-top: 62px solid transparent;
    margin-top: -62px;
}

body:not(.oxygen-builder-body).admin-bar .ct-section {
     border-top: 94px solid transparent;
     margin-top: -94px;
}

Or for applying to just one page, include the body class that WordPress adds with the page ID.

body:not(.oxygen-builder-body).page-id-34 .ct-section {
    background-clip: padding-box;
    border-top: 62px solid transparent;
    margin-top: -62px;
}

body:not(.oxygen-builder-body).page-id-34.admin-bar .ct-section {
     border-top: 94px solid transparent;
     margin-top: -94px;
}

The 62px needs to match the height of our sticky header. With the admin bar, 32px needs to be added to ensure it works correctly while we’re logged in and have the admin bar visible.

All done.