Create & customize a sticky (fixed) header

You are here:
  • KB Home
  • Create & customize a sticky (fixed) header
Estimated reading time: 1 min

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 .

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

Customize with Elementor:

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: https://d.pr/i/S916LP . You can customize here as you wish.

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

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.

Was this article helpful?
Dislike 0
Views: 553

Join the conversation