How to make a section/column sticky?

Author: An Do 10448 views

Making sections/columns sticky will help your page more user-friendly and intuitive interface. For example, it can be used to keep navigation menus, headers, or footers visible on the screen as the user scrolls through the content, making it easier to access important information without having to scroll back up to the top of the page. It can also be used to create more engaging and interactive designs, such as parallax scrolling effects or sticky call-to-action buttons.

1. How to make a sticky Column?

The left column you want to make sticky has to be shorter than the other right columm.

Go to Column > Advanced > Attributes > Custom CSS for this element

All you need to do is use this code and paste it into the Custom CSS for this element box of the sticky column.

@media (min-width: 1024px) {
    & > .core__column--wrapper{
        height: fit-content;
        position: sticky;
        top: 0px;
    }
}

2. How to make a sticky Section?

2.1. Section sticky at the top

Go to the Navigation > Section.
Find Advanced > Attributes > Custom CSS for this element.

Please copy the code below and paste it into the Custom CSS for this element box.

& {
height: fit-content;
position: sticky;
top: 0px;
z-index: 9 !important;
}

2.1. Section sticky at the bottom

Go to the Navigation > Section.
Find Advanced > Attributes > Custom CSS for this element.

Please copy the code below and paste it into the Custom CSS for this element box.

& {
height: fit-content;
position: sticky;
bottom: 0px;
z-index: 9 !important;
}

3. FAQs

Question: What should you do if you’ve already added the code to the Column, but it isn’t working yet?

Head over to the Product Image section and check if “Overflow hidden” is chosen. If it’s ticked, just untick it, and you should be good to go.

Question: If you have already applied the code to the Section but see no changes, what is the next troubleshooting step?

Kindly copy – paste this code: div#nt_wrapper {overflow: visible !important;}

By doing that, go to Publish > Custom CSS/JS to add