/
No results found. Try again with different words?
Search must be at least 3 characters.
- How to activate Ultimate Addons for Elementor license?
- How to Get License Key of Ultimate Addons for Elementor?
- About Beta Versions
- How to install the Ultimate Addons for Elementor plugin?
- Getting Started with Ultimate Addons for Elementor
- Enabling Automatic Beta Updates for UAE
- How Can I Upgrade the License?
- How to Update Ultimate Addons for Elementor Plugin?
- How to update any plugin manually through FTP?
- About Beta Versions
- How to Enable / Disable Widgets in UAE to Reduce Server Requests?
- How to White Label UAE?
- Getting Started with Ultimate Addons for Elementor
- UAE Saved Sections
- How to create Google API key in Google Maps Widget of UAE?
- White Screen /500 Error After Plugin Installation
- How to Increase the Memory Limit of your site?
- Unable to see the Font Awesome 5 Icons in UAE’s widgets?
- Creating a Sticky Header With Elementor Header & Footer Builder Plugin
- Is Ultimate Addons for Elementor Compatible with the Latest Elementor/Elementor Pro?
- How To Translate Ultimate Addons Widgets With WPML?
Creating a Sticky Header With Elementor Header & Footer Builder Plugin
Elementor Header & Footer Builder is a free WordPress plugin that allows creating custom header, footer and blocks easily.
You can design a section in Elementor and set it as a header/footer or use it as a custom block on the website. You can even choose specific pages/posts and other locations to display this custom section.
In this article we will explain how you can create header with this plugin and make it sticky in easiest way.
We have divided this article in two parts –
- Designing a section with Elementor and set it as a header.
- Make this header sticky.
In case you already know how to create header with Elementor Header & Footer Builder Plugin you can directly jump to second part.
Creating Custom Header
Before beginning make sure you have Elementor plugin activated. Then follow the steps below –
Step 1 – Install and activate the Elementor Header & Footer Builder plugin from WordPress dashboard.
Step 2 – Visit Appearance > Elementor Header & Footer & Builder > Add New.
![Elementor Header & Footer Builder add new](https://ultimateelementor.com/wp-content/uploads/2021/06/Image-2021-06-21-at-5.02.31-PM.png)
Step 3 – Give a nice title to the section. Set ‘Type of Template’ as Header. You can select display rules. That means your custom header will be displayed only on chosen location.
![Elementor Header & Footer Builder type of template](https://ultimateelementor.com/wp-content/uploads/2021/06/Image-2021-06-21-at-4.50.34-PM.png)
Step 4 – Now open the Elementor editor and design a custom header as per your requirement.
Save the design and your custom header will display at selected location. 🙂
Once your custom header is up follow the next part to make it sticky.
Making Custom Header Sticky
Step 1 – Now edit the above header in Elementor and add a Custom ID to the outermost section (here we are using my-custom-id ).
![Add CSS id to Elementor section](https://ultimateelementor.com/wp-content/uploads/2020/06/custom-id-for-elementor-section.png)
Step 2 – Now add following custom CSS. You can add it to the customizer under the ‘Additional CSS’ section or use any external plugin that provides an area to add custom CSS.
#my-custom-id.elementor-section{
position: fixed;
left: 0;
width: 100%;
}
Note – In the above code, please replace ‘my-custom-id’ with your ID.
This step will make your header stick to the top.
IFurther, if you want to make your header sticky as soon as users scrolls the page add following JS and CSS code.
First, add the following JS snippet in the functions.php file of your child theme. In case you are not sure about how to install a child theme, kindly contact your theme author.
// WordPress custom function
function my_custom_function(){
?>
<script>
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById( "my-custom-id" );
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if ( window.pageYOffset > 40 ) {
header.classList.add( "hfe-sticky" );
} else {
setTimeout(function(){
header.classList.remove( "hfe-sticky" );
}, 100);
}
}
</script>
<?php
}
add_action('wp_footer', 'my_custom_function');
Then add following CSS to customizer under the ‘Additional CSS’ section or use any external plugin that provides an area to add custom CSS. [In case you have added previous CSS at Step 2, please remove it and add following one].
#my-custom-id.elementor-section.hfe-sticky{
position: fixed;
left:0;
width:100%;
animation:slide-down 0.8s;
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 0.9;
transform: translateY(0);
}
}
@media( max-width: 767px ){
#my-custom-id.elementor-section.hfe-sticky{
top: 0;
}
}
That’s it! Here is how your custom sticky header will look like –
Extra – More Customization using Custom CSS
In case you want to apply some styling for your sticky header you can use Custom CSS ID we added in Part-2 Step-1 (i.e. my-custom-id). Below is the template you will need to use.
#my-custom-id.elementor-section.hfe-sticky{
//your code here
}
Note – Replace ‘my-custom-id’ with your ID and add the necessary code inside.
Here is an example that shows how you can use above CSS snippet –
Consider you need to change the background color of the header after it sticks to the top. Then CSS you will add is –
#my-custom-id.elementor-section.hfe-sticky{
background-color:red;
}
Was this doc helpful?
What went wrong?
We don't respond to the article feedback, we use it to improve our support content.
On this page