Create & customize a “Shrinking” sticky header

You are here:
  • KB Home
  • Create & customize a “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

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

Join the conversation