Make a sticky section

Note

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

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

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

You can check this video tutorial:

How to make a sticky section

Step 1: Give a unique ID to the section

Choose the Section that you want to make sticky.

Navigate to the General tab > Attributes section > give a unique ID to the element. In this case, we called it “sticky-01”.

Step 2: Add custom CSS code

  • Open the Custom Code Editor > copy and paste the code below into the Custom CSS section > Update.

Important: Make sure that you got the correct ID of the element after the “#” sign. It should be #ID {…}

Please click here to see the code: https://pastebin.com/raw/J5qQNjpH

  • After inserting the code, click on the Save change button to save what you’ve just made.

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

Common cases sticky section doesn’t work

The section is not sticky

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

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

  • Check until you see the code “overflow:hidden;” in the Styles tab of the 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

  • Publish the page and check the Live View

Sticky section is overridden by another sticky section

Your page has 2 sticky things: menu navigation and PageFly section. The PageFly sticky section is arranged under the sticky menu so the sticky menu navigation will hide a part of the PageFly sticky section and your sticky section doesn’t display completely.

In this case, please follow these steps:

  • On the live page, right-click to open Inspect

  • Click the icon at the top left corner of the inspect window.
  • Move the mouse to the menu navigation to check the height of this section. In this case, it is 106 pixels.

  • Change the code that you added before to make the section sticky.
    You need to set your sticky section’s top position to be equal to the height of the menu navigation, which is 106 pixels. Click Save Change.

  • 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.

Navigate this category

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

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

I got it!