Create & customize an Animated (shrinking) sticky header

You are here:
  • KB Home
  • Create & customize an Animated (shrinking) sticky header
Estimated reading time: 1 min

This feature is available starting with 1.2.0 version .

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 “Shrink Header on scroll”.

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

Customizing with Elementor:

First make sure you enable Fixed Header in Customizer > Header > General options, and also “Animate Header on Scroll” eg: . Afterwards access the Header Global Section with Elementor.

Edit any section element and access Advanced tab, in which you’ll see a panel called “Rey – Fixed Header Settings” eg: . You can customize here as you wish.

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.

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: .

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: .

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

Go beyong 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.

Was this article helpful?
Dislike 0
Views: 404

Join the conversation