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
Altermin-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 andarrange 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.
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.
Welcome to LT Digital Team. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.
Latest posts by LT Digital Team (Content & Marketing) (see all)
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.
Functional
Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Recent Comments