Create & personalize a sticky header

Adjust the Header position

To enable this feature, access Settings › Header › General and look for Header position. In this option select “Sticky” .

You’ll be prompted with new options. The one that matters and you need to enable is “Shrink on scroll” eg: screenshot . Please know you can also override this setting in each page’s Singular settings eg: screenshot .

That’s about it. The entire animation and reduction in sizes is automatic and there’s no need for any custom code.

Personalize more with Elementor

Access the Header Global Section with Elementor (eg: ). You’ll need to make sure that “Shrink header on scroll” ( eg: screenshot ) is enabled.

Edit any section element and access the Advanced tab, in which you’ll see a panel called “Rey – Fixed Header Settings” eg: screenshot . You can personalize here as you wish, for example adjusting the header height when fixed.

Make the header transparent initially, then with background on scroll

In the “Header Position options” make sure to add a background color on the section eg: screenshot (if this pane with controls is not showing up, make sure to enable “Shrink header on scroll” in Theme Settings eg: screenshot ).

Hiding an element when “shrinked”

To hide (animated) any element, including sections or entire columns, access the element Advanced tab and in the CSS Classes add “hide-on-shrink” eg: screenshot .

Removing an element when “shrinked”

To remove (not animated) any element, access the element Advanced tab and in the CSS Classes add “remove-on-shrink” eg: screenshot .

Unlike hiding, this completely removes the element not showing at all in the DOM.

Go beyond, and build a completely different sticky header

If you want to have a totally different version of the header when sticked, you can use the built-in Sticky Top – Global Section feature. Read more on how to build a Sticky Header – Global section.

Adapting through CSS:

All these CSS below should be added either:

• in /themes/rey-child/style.css stylesheet (recommended)
• or in Theme Settings > Additional CSS

Background-color (by default, white when shrinked):

:root {
   --header-custom-fixed-shrank-bg: #EEEEEE;
}

Custom height:

:root {   
  --header-custom-fixed-shrank-height: 60px; // default
}

Custom padding top & bottom:

:root {   
  --header-custom-fixed-shrank-pt: 5px; // default is 5px
  --header-custom-fixed-shrank-pb: 5px; // default is 5px
}

Bottom shadow:

:root {
  // Disable shadow
  --header-fixed-shrank-shadow: none;
  // or custom shadow
  --header-fixed-shrank-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px 0px;
}

Shrinking speed:

:root {   --header-fixed-shrank-speed: 0.3s; // default is 0.3s (300 milliseconds)   // or customize the "out" animation speed   --header-fixed-shrank-speed-out: 0.12s; // default is 0.12s (120 milliseconds) }

Creating your own CSS:

The header reacts when the class “–shrank” is added to the header, so any custom css you want to make, please use with the selector:

.rey-siteHeader.header-pos--fixed.--fixed-shrinking.--shrank .any-element {
  ...
}

As seen the selector contains 4 classes which should ensure any CSS will be overriden.

Frequently asked questions:

On homepage, the header is not sticked, why is that?

This is likely happening because for the Homepage (or any other page) is overriding the Header Position global setting. Please try editing the page in the admin and set it to inherit eg: screenshot .