We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies.
Customise Consent Preferences
We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.
The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ...
Always Active
Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.
No cookies to display.
Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.
No cookies to display.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.
No cookies to display.
Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.
No cookies to display.
Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.
Sticky headers are headers that remain fixed to the top of the website and are visible even when you scroll down. In this article, we will give you the instruction to design a Sticky Header with Elementor Page Builder. Take it a consideration now!
KNOW HOW TO:
Create a transparent Sticky Header
Make an animation transition with CSS
Set min-height when scrolling
Follow these steps below:
Step 1: Click Templates > Theme Builder > Header, then change your header layout.
Step 2: Right-click the header’s section handle
Step 3: Go to Advanced, and choose Motion Effects in the board
Advanced
Motion Effects
Step 1: There are 3 modes including Top, Bottom, and None in Sticky. You can choose Top if you want to make Sticky Header.
Step 2: In Sticky On, choose and insert the devices ( Desktop, Tablet, and Mobile) you want to stick header
Step 3: To Offset, type the number of pixels scrolled before the header becomes sticky.
Step 4: Insert the type the number of pixels scrolled before the header effects take place in Effects Offset
Note: If Custom CSS is put on, the Custom CSS options will operate.
Custom CSS
Add your own custom CSS here to change the header’s background color, transparency, and height, with an easing animation effect.
CONCLUSION
That all we want to share with you. If you have any question, please leave a comment below and we will reply as soon as possible.
We're a Digital Team from EngineTemplate with 5 content experts. Our team has 5 years exp in open source Joomla and WordPress, we make daily blogs and build useful resources for everyone who is having issues with open source while using it.
ET Digital Team
