How to enable Sticky Header for your theme


In this article, you’ll learn how to make your theme’s Header always stay on top in just a few clicks using the EcomSolid Editor, no coding skills required.

What is Sticky navigation?

Sticky navigation, as opposed to Fixed navigation, is a new design technique that allows website visitors to always have access to the navigation menu (commonly referred to as the Header) regardless of where they are on a page.

Instead of being a regular static part on the page Sticky navigation means the Header sticks to the top of the page at all times as users continue to scroll down. This layout is more intuitive as users will be constantly reminded of your brand, and more importantly, they can navigate to other pages at any time without having to scroll all the way up.

In EcomSolid, Sticky Header is built-in with responsive design in mind to suit all devices and screen sizes. Let’s go over the feature in the next section.


How do I enable the Sticky Header for my store?


Good news: Sticky Header is enabled by default whenever a new Header section is put on your page, so no extra work is needed!


When Sticky Header is enabled, you can adjust the Header Offset (in pixels) using the slider or the box. The default offset value is 0, increasing this value will widen the margin between the header and the top edge of the page.



Here’s a handy tip: If you use a topbar for announcements, increasing the Header Offset value will help avoid making the Header and Topbar atoms stack on top of each other.

If, for some reason, you need to disable Sticky Header, please follow the steps below:

Step 1: In the EcomSolid Dashboard, click on “Customize” to enter the Theme Editor.

Step 2: Click on the Header section to open the configuration on the left sidebar

Step 3: Select the Design tab.

Step 4: Under the General zone, look for Sticky Header and hit the “Disable” button.

Step 5: Hit “Save” and “Preview” to check for the result before updating your live store. The Header should no longer be sticky at the top and instead, become static.


Step 6: Go back to the Editor, select “Update Live” > “Yes, Update” to bring the change to your front store.

Designing a sticky header used to require extensive coding, however, with EcomSolid, you can focus more on building your store, and leave all the coding to us!

Should you require any further assistance, our EcomSolid Support Team is always here to help. We can be reached at any time via email or live chat.


Was this helpful?