Create & customize a sticky (fixed) header

Set the Header position globally

To enable this feature, access Customizer > Header > General and look for Header position. In this option select “Fixed (Sticked to top)” .

You’ll be prompted with new options. The one that matters and you need to enable is “Animate on scroll” eg: https://d.pr/i/aBaMQB . Please know you can also override this setting in each page’s Singular settings eg: https://d.pr/i/AzTezY .

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

Customize even more with Elementor

First, access the Header Global Section with Elementor. You’ll need to make sure that “Animate on scroll” eg: https://d.pr/i/aBaMQB is enabled.

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

Make the header transparent initially, then with background on scroll

In the “Rey – Fixed Header Settings” make sure to add a background color on the section eg: https://d.pr/i/CNdTGC (if this pane with controls is not showing up, make sure to enable “Animate on scroll” in Customizer eg: https://d.pr/i/aBaMQB ).

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: https://d.pr/i/GFuduj .

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: https://d.pr/i/GFuduj .

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.

Customizing through CSS:

All these CSS below should be added either:

• in /themes/rey-child/style.css stylesheet (recommended)
• or in Customizer > 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 backend and set it to inherit eg: https://d.pr/i/AzTezY .