Make a sticky section

Note

This feature might not work on some Shopify themes depending on how the theme developer creates the theme.

This feature only applies for a section. In case you need to make a button sticky, please contact our Support team. (this documentation doesn’t apply to make a button sticky).

In this article, you will learn how to create a sticky section with custom CSS code.

How to make a sticky section

Step 1: Click on the section that you want to make it sticky

sticky pagefly

Step 2: Go to General tab > Scroll down to Enable Sticky Top > Select “Yes

Note: This feature only works on the live page and might not work due to theme conflict.

Now, choose the Publish button on the menu bar and go to the live page to see the result.

Configuration

When you turn the Enable Sticky Top feature on, there are two advanced settings to adjust.

Top Offset: to adjust the spacing between the top edge of the viewport and the sticky sectionmake a sticky section
Z-index (in More settings button): Stack level of a section, one with greater stack level will be in front of a lower onemake a sticky section

Common cases sticky section doesn’t workClick to copy

The section is not stickyClick to copy

Although you followed all the steps above, the sticky section still doesn’t work. You don’t know why?

I set this section sticky but it doesn’t work on live view:

The reason is that there is a containing section of this section including a code from the theme that is “overflow:hidden;”. This code overrides the sticky code and makes the sticky section not work. To fix it, please follow these steps:

  • On live page, right click on the sticky section and open Inspect

sticky section

  • From the sticky section, check containing sections of this section one by one

sticky section

  • Check until you see the code “overflow:hidden;” in the Styles tab of the section

sticky section

  • Copy the Class Name of this section. Back to PageFly page editor, open Custom Code Editor and add this code:

.classname {overflow: visible !important;}

In this case, Class Name of section is “pagefly-container” so the code you need to add is: https://pastebin.com/raw/YkX4J7z6

sticky section

  • Publish the page and check the Live View

If you have followed the above solutions, the sticky section still doesn’t work, please reach out to us via 24/7 in-app Live Chat so that we can help you directly.

If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!

JOIN PAGEFLY COMMUNITY

Thank you for your feedback!

Navigate this category

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!