This article is going to introduce a simple way to add a sticky header in Elementor, using no third party add-ons and incredibly simple CSS.

Elementor doesn't have a great sticky header functionality built in, so we're left using third party plugins or CSS and JavaScript.

How We Add A Sticky Header In Elementor

Our agency uses 4 simple lines of custom CSS to add in our sticky headers, and wanted to share our method with you. At the end of this article, will also include advanced additions to your sticky header and Elementor which help you resize the image on scroll, change the background color of your sticky header on the scroll, and more

Keep in mind, this guide is oriented towards those who use Elementor pro. That's because Elementor Pro includes the theme builder, which allows you to set up your own headers and footers. If you don't already own this plugin, it's well worth its price of $49.00 as it essentially allows you to create a website from the ground up.

Grabbing it from this affiliate link supports our agency at no extra cost to you.

Step 1: Build Out The Basic Header

First, we're going to build out our basic header and apply it to all pages on Elementor. To access the header builder, navigate to templates on the admin back-end comma and then click on theme builder.

Add a new template, and change the type to header. After naming the template, click the green “Create template” button.

Now, build out your header. To do this, people typically create a new section, divide it into two columns, and then add a site logo and navigation menu.

Typically, the site logo is aligned directly to the left of the section (and contained in the left column), While the Elementor menu is in the right column, and aligned to the right.

You can also only use one column, setting the positioning under advanced settings for each element within the menu to be inline.

You can use horizontal align, “space between”, to achieve the same effect as two columns. This is our recommended method as it cuts down on the number of Dom elements, and leads to a (marginally) quicker loading website.

Under the styling tab in Elementor, you can manipulate your header background to be transparent or colored. In this example, we want our header to overlay our initial hero section, meaning that we're going to keep the background transparent. To do this, we set the background color of the section to be rgb(0,0,0).

Be sure to change the HTML tag from default to “Header”

Finally, give your header a custom CSS ID, like: #my-cool-header. (We'll also add a Custom CSS Class)

After building your header, publish it and set the display conditions accordingly. In this example we are displaying this header on all sections of our website. However, the Elementor conditional visibility tools are one of the best in the industry, and you can use this too selectively display your sticky header anywhere you need to.

At this point, if you navigate to the front end of your website, you'll see the header displayed prominently. But, as you'll see, it's not sticky, nor does it overlay the initial content.

To make our Elementor header sticky (ie. overlay the content as you Scroll down the screen), It's time to add some custom CSS.

Navigate back to your header builder, and select the overall column. Go to the advanced settings tab of that section, and open up the custom CSS input.

?? This is the part of the article where we show you the incredibly simple way to make your header sticky in Elementor.

In the custom CSS input, add the following code:

#my-cool-header {
    position: fixed;
    width:100%;
    top:0;
    z-index: 9999;
}Code language: CSS (css)

If you type it into the input (instead of copying and pasting) you'll be able to see what each line does. First, selector applies this custom CSS to the target wrapper element, which is the header section in this case.

Second, the position:fixed ensures that the header will remain sticky as you scroll down the page.

Third, the top:0 makes the header stay fixed to the top of your browser viewport.

Fourth, the z-index:9999 ensures that the header remains above all of the content on the page.

If you navigate back to the front end of your website, you'll see that the header now overlays the content. As you Scroll down the page, its position stays fixed to the top of the screen.

In essence, it's the simplest sticky header you'll ever incorporate into an Elementor website. All you need are four line of CSS.

At this point, you can choose to stop and leave the header as it is. However, many of the time we want to add some advanced effects.

For us, the two most important effects for any sticky header in Elementor are the following:

• Changing the background from transparent to a color when your user scrolls down the screen

This is important because it ensures that the menu elements will be visible when scrolling down the screen. Typically, a hero consists of a photograph that is dark, meaning that there is adequate contrast for your visitor to view and click on your navigation. However, as you Scroll down the screen, changing the background color on an Elementor sticky header makes it much easier to read and use.

• Changing the image on the scroll

In many cases, the initial menu has the company logo that displays the name within it. This makes it a wide ratio, something like 16 by 9, which can be reduced as the visitor scrolls down the screen.

By reducing the size of the company logo, the overall height of the sticky header in Elementor is reduced as well, maximizing the amount of the viewport that the user can use to view content.

For example, we may have our logo like the right one when at the top of the page.

But the logo then changes to the left (and shrinks) when the user scrolls down, minimizing the height of everything.

Advanced Additions

Change Background Color On Scroll

The first advanced addition that we want to make to our sticky Elementor header is changing the background color of the general section on scroll.

To do this, we're going to use some basic JavaScript and CSS. if this scares you, don't worry all you need to do is copy and paste into an HTML block.

First, drag and drop in HTML block directly into the header. Don't worry about messing with the structure, as the HTML block will not show up on the front end.

Paste in the following code:

<script>
window.onscroll = () => {
  const nav = document.querySelector('#my-cool-header');
  if(this.scrollY <= 10) nav.className = ''; else nav.className = 'scroll';
};
</script>Code language: HTML, XML (xml)

What this code does is applies CSS styling as soon as you scroll past 10px.

For our custom CSS with the header, we're going to add 2 new lines. The first line makes the transition Between transparent and background color fade in.

The second ensures that the original background is transparent.

#my-cool-header {
    position: fixed;
    width:100%;
    top:0;
    z-index: 9999;
    transition:500ms ease;
    background:transparent;
}
Code language: CSS (css)

Then, we're going to add a completely new CSS selector, which applies the background color when the user scrolls down your page:

#my-cool-header.scroll {
  background:#000;
}Code language: CSS (css)

Simply copy and paste both of these CSS codes directly into the custom CSS for your header section.

Now, save the page, and navigate to your header on the front end. As you Scroll down the page, the .scroll class effect will be applied. In this example we only changed the background to black, but you can mess around with the sizing, font styles, and more.

Change Image On Scroll

Another advanced effect that we like applying to our sticky Elementor headers is changing the sizing of the logo image, or even the entire logo image altogether.

First, let's talk about how you can resize the image using the JavaScript and classes already in place from the “change background color on scroll”.

Simply specify the selector of your site logo behind the original and .scroll css like so:

#my-cool-header img{
    width:100px;
    transition:500ms ease;
}

#my-cool-header.scroll img{
  width:50px;
}Code language: CSS (css)

This code will resize the width of our header image 50 pixels when scrolling down the page. In our case, we needed to add resize the actual header to better fit our 50px logo.

This was applied to the #my-cool-header.scroll selector.

Let's say you wanted to change the image altogether when you scrolled down the page. This is another thing that is possible, and quite easy to do using CSS.

#my-cool-header {
    position: fixed;
    width:100%;
    top:0;
    z-index: 9999;
    transition:500ms ease;
    background:transparent;
}

#my-cool-header.scroll {
  background:#000;
  height: auto;
  margin-top: -20px !important;
}

#my-cool-header img{
   width:100px;
   transition:500ms ease;
}

#my-cool-header.scroll img{
  opacity: 0;
  transition:500ms ease;
}

#my-cool-header.scroll .logo {
  background-image: url(https://img.freepik.com/free-vector/cute-pig-with-pink-skin-white_1308-40061.jpg?size=626&ext=jpg);
  background-size: cover;
  width:50px;
  transition:500ms ease;
}Code language: CSS (css)

What this does is hide the original logo image and display a background image in its place. In our example, this would be another pig photo.

You can also make use of CSS Media Queries in Elementor to apply different scroll effects depending on the width of the screen.

Conclusion

We hope was showed you a simple way to add Sticky Header In Elementor, along with some advanced effects.

If you have any questions regarding this, feel free to reach out in the comments.