In this article, we will introduce you an easy way to generate a sticky ticky header effect by Elementor’s CSS class.

We will help you to learn the way to:

  • Use CSS to generate an animation transition
  • Alter min-height when you scroll your page
  • Make your sticky header

Let follow these steps:

Step 1: Switch on Templates, then click on Theme Builder > Header and arrange the header template.

Step 2: Take a right click on the header’s section handle in order to edit the section

Step 3: Switch on the panel and then click on Advanced > Motion Effects.

File-Pwb1Nrewo2

Advanced Features:

Custom CSS

Insert your custom CSS in this place. There is an example of the CSS below which make a change of background color, transparency, and height of the header.

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Custom Css

Notice: Just in case your customers scrolled the number of pixels which are specified in the Offset options, this CSS will be effective.

Motion Effects

There are several motion effect options such as:

  • Offset: Set the number of pixels which are scrolled before making the header become sticky.
  • Effects Offset: Set the number of pixels which are scrolled before taking place the header effects
  • Sticky: Click on the Top button to glue the header to the top. Other options are None and Bottom
  • Sticky On: Choose the gadgets to stick the header like Mobile, tablet, desktop.

Notice: The Offset Effects option is just available in case Custom CSS is applied.

In conclusion

If you have any questions about this instruction, don’t hesitate to leave a comment below. We will try to answer your questions as soon as possible. Please take a look at our free Elementor WordPress themes here.

Image Credit: docs.elementor

 

 

5/5 - (1 vote)
Lt Digital Team (Content &Amp; Marketing)
Latest posts by LT Digital Team (Content & Marketing) (see all)

Summer Sale Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now
Last call: Summer Sale! Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now