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 –

1. Designing a section with Elementor and set it as a header.
2. 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.

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.

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 ).

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;
}