Create a separate “custom built” Sticky Header

You are here:
Estimated reading time: 1 min

Even though you can position your header as Fixed (which sticks at the top of your site), it can’t be customized to be different. For example it’s likely you want it to be shorter in height, to use a different logo, or to simply add any other content.

With the Sticky Global sections you can now do this as easy as possible.

LinkCreate a new Global section – Generic

Access Rey theme > Global Sections and create a new Generic Section eg:

Edit this section as you want, or you can duplicate the Header Global Section you’re currently using and customize it.

If you clone the Header global section, don’t forget to change its type to Generic Section instead of Header.

LinkAssign the global section as a Top Sticky Global Section

Access Customizer > General options > Sticky Global Sections and in the Top Global Section list, select the newly created section.

LinkAdding a custom activation offset

Provide an offset if needed. The offset is the activation point on scroll, when the sticky section will become visible.

You can add pixels, or even a custom unique selector, such as an id ( #my_unique_id ) or even a class (but it needs to be unique, so make sure of that).

If Offset is blank, by default the sticky section will be visible after the header is off viewport.

Was this article helpful?
Dislike 1
Views: 2924

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!