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.
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; }
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
- Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
- Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024
- 4+ Best Woocommerce Private Store Plugins - March 8, 2024
Recent Comments