How to Creating a Sticky Header With Elementor Header & Footer Builder Plugin

Table of Contents

The Elementor Header & Footer Builder is a free plugin for WordPress that makes it simple to create individualized headers and footers, as well as blocks.

You can use Elementor to build a section and then either use it as a header or footer on the website, or you can use it as a custom block.

You can also select certain pages or posts, in addition to other locations, to display this individualized area.

In this article, we will describe how you may construct a header with this plugin, as well as the easiest way to make the header sticky.

This article is broken up into two parts: the introduction and the body.

Create a header for a section using Elementor once it has been designed.

Make sure this header is always visible.

In the event that you are already familiar with the process of creating a header with the Elementor Header & Footer Builder Plugin, you may skip forward to the second part of this tutorial.

How To Create Custom Header?

Before getting started, check to see that the Elementor plugin is already active. Then, proceed with the steps that are listed below:

Step 1: You need to do is log in to your WordPress dashboard to download the Elementor Header & Footer Builder plugin and then activate it.

Step 2: Navigate to the Appearance menu, select Elementor Header & Footer & Builder, and click the Add New button.

Step 3: Provide the section with an attractive title. Make sure that the header reads “Type of Template.” You can select display rules. This means that your individualized header will only appear in the location that you select.

Step 4: At this point, launch the Elementor editor and create a personalized header according to the specifications you have provided.

Once you save the design, your personalized header will appear in the position that you selected.

After you have uploaded your custom header, proceed to the next step to ensure that it is always visible.

How to Make Custom Header Sticky

Step 1: Next, update the header that is above in Elementor, and add a Custom ID to the section that is at the very top (here we are using my-custom-id ).

Step 2: Now apply the custom CSS that is following. You have the option of adding it in the ‘Additional CSS’ section of the customizer, or you can use any third-party plugin that gives you a place to enter your own custom CSS.

Note: In the preceding code, your ID should be substituted for “my-custom-id.”

Following these instructions will ensure that your header remains in place at the top.

In addition, the following JS and CSS code should be included in your website in order to make the header sticky as soon as the user scrolls down the page.

To begin, include the following JS code snippet in the functions.php file that is associated with your child theme. In the event that you are unsure how to install a child theme, please get in touch with the author of your current theme.

Then add the following CSS to the customizer in the section labeled ‘Additional CSS,’ or use any other plugin that offers a space to input custom CSS. [In the event that you inserted the preceding CSS at Step 2, you will need to remove it and add the following one.]

That wraps it up! The following is an example of what your individualized sticky header will look like:

Additional Customization with the Use of Custom CSS

You are free to use the Custom CSS ID that we added in Part-2 Step-1 in the event that you would like to apply some styling to your sticky header (i.e. my-custom-id). The model that you should follow can be found down below.

Please note that ‘my-custom-id’ should be replaced with your own ID, and the appropriate code should be added inside.

The following is a demonstration of one possible use for the CSS code that was previously mentioned:

After the header has adhered to the top, you should consider whether or not it is necessary to alter the color of the backdrop. After that, the CSS that you will add is –

Leave a Comment

Copy link
Powered by Social Snap