Sticky Bar

This feature allows you to set the first and/or last Instablock of a page as a sticky bar in order to make information easily accessible to your visitors as they navigate your page. To enable it, click on Sticky Bar on the right-side menu of the builder. 

GIF showing where to click to enable the Sticky Bar

There are two separate toggles: one for the sticky header and the other for the sticky footer. 

  • Enabling the Sticky Header will ensure that the first Instablock on the page remains visible at the top of the screen regardless of how far down the page the visitor scrolls. 
  • Enabling the Sticky Footer will ensure that the last Instablock on the page remains visible at the top of the screen regardless of the visitor's scrolling position. 

Please keep in mind that it is not recommended to enable both a sticky header and a sticky footer at the same time, as that is not considered a good user experience. Most often, you would use a sticky header on the desktop version of a page and a sticky footer on mobile. Our Desktop/Mobile selector allows you to make this choice depending on your needs.
To learn more about hiding elements on desktop/mobile, you can refer to our dedicated guide here: https://d.pr/k0oB8Z 

The Instablocks targeted by this feature will not appear sticky in the editor to avoid occupying precious working space, so please use Preview Mode or the live environment to test how they look.
In case you are not ready to publish the page yet, you can use the Demo Page publishing option, which is specifically for testing purposes. More about publishing options here: https://d.pr/hBIafo

Important note: In case you have been using our older article (linked here: https://d.pr/8eY7PV)to enable a sticky header/footer via code, make sure to remove all of the code in order to use the built-in Sticky Bar. If you need more information to achieve that, please refer to the linked article.