Last Updated 3 Jul 2024
|

How To Create Elementor Sticky Headers – Beginner’s Guide

Quick Summary ↪ This guide explains how to create a sticky header using Elementor without writing code. It walks through steps like creating your menu, designing the header, and making it sticky. Elementor eliminates the need for manual JavaScript and CSS. Enhance user experience and navigation by implementing a sticky header with Elementor.

How To Create Sticky Headers With Elementor

A header is often the first thing a user sees when they visit your site and is the backbone of how a user navigates your website.

Whether you have an eCommerce website, a personal site, an education website, a community forum, or a media website. It’s the header that makes it easy to navigate and a pleasure to use.

Nowadays, we can see many web designers adopting sticky headers as a way to arrange and structure a website for better user navigation. In one of our articles, we already talked about how easy it is to create custom headers with Elementor.

In this article, we’ll show you how to create your own sticky header with Elementor.

If you don’t know, with Elementor you can create a sticky header for your website without using a single line of code.

Let’s get started!

How to Create Sticky Headers with Elementor

Sticky headers allow a website user to have access to the page’s header and menu section, no matter how much they scroll down.

Step 1: Creating Your Menu

To add a sticky header to your website first, you need to create Main Menu in your wp-admin > Appearance > Menus. Add the section you want to show in the header.

Main Menu Screenshot on Elementor

Step 2: Creating Your Header In Elementor

After creating the main menu, go to Elementor Templates > Theme Builder. In theme builder page select Header section and click on “Add New Header”.

Theme Builder Elementor Settings
Create Your First Header Elementor Settings

On the pop-up screen, give a name to the header template and click on “Create Template”.

Create Template Settings in Elementor

After that, you’ll be redirected to the Elementor editor page. Here you can choose a pre-built header template or create your own from scratch.

For this guide, we’ll be creating our Elementor sticky header from scratch.

Before we start creating a template, you can see some header widgets in the Elementor editor. Using these sections we can create a header quickly and easily.

Elementor Header Widgets

Step 3: Creating a Header Template in Elementor

Add a two-column structure. Make sure that the content width of the section is “Boxed”.

Elementor Header Structure Settings
Elementor Edit Section Content width Settings

 Under the “Edit” Column set the first column width to 20%.

Elementor Edit Column Settings

Now add your website’s Site Logo to the first column, and select left alignment.

Add header logo elementor settings

In the second column, add a Nav Menu and select the main menu you created in step 1. Align the Nav Menu to the right-hand side.

Add nav menu elementor settings

For this guide, we’re creating a simple header. You can create a more detailed design for your header by adding a background color, hovering animation effects, buttons and more.

Step 4: How to Make Your Elementor Header Sticky.

After creating our basic Elementor header, it’s now time to make it a Sticky header.

To do this, click on the Edit section (Whole header section). Go to Advanced > Motion Effects.

Adding motion effects instructions

Under motion effects, select “sticky to the Top” and select the “devices” where you want to show sticky header and hit on the “Publish” button.

Adding sticky to top settings instructions

After publishing, Elementor asks you to Add a Condition for your header. Basically, by adding conditions you can show header wherever you want on the site.

Here we wanted to show this header on the entire site, excluding the 404 Page. So, we included the Entire Site in the dropdown and excluded 404 Page.

Elementor publish settings to exclude 404 page

As you can see creating your custom Sticky header with Elementor is both quick and painless!

Make Your Elementor Sticky Header Much More Stylish Using Custom CSS

Elementor gives you the freedom to customize a sticky header to make it more stylish by adding the CSS class.

Here you can add Height, Background color, Transition, and Sticky effects to the sticky header.

To make your sticky header more stylish, go back to the Edit section (Whole header section). Go to Advanced > Motion Effects.

Adding motion effects instructions

Here set “Effects Offset” to 100. This is the scrolling distance where the scrolling effect occurs as a visitor uses your website.

Motion offset settings set to 100
Motion offset settings set to 100

Now scroll down and click on “Custom CSS”. Add the below-given CSS class. You can edit this CSS to add your own numbers.

Custom CSS codes settings guide

Custom CSS:

selector.elementor-sticky–-effects { 
background-color: rgb(255, 220, 168) !important; 
}
selector { 
transition: background-color 3s ease !important; 
}
selector.elementor-sticky–-effects >.elementor-container { 
min-height: 80px; 
}
selector > .elementor-container { 
transition: min-height 1s ease !important; 
}

This is how the sticky header looks like after adding CSS class.

Different Header Design Options for Elementor Users

Elementor comes with a range of header templates out of the box, each one is unique, stylish and helps your users easily navigate your website.

With Elementor, you can design your website headers however you want. For example, you can add the site logo to the center, the main menu below the logo. You can add one more header above the main header to show the phone number, social buttons and more.

Here are just a handful of the different header design options for Elementor users.

Sample number 1 of header built with elementor
Sample number 2 of header built with elementor
Sample number 3 of header built with elementor
Sample number 4 of header built with elementor
Sample number 5 of header built with elementor
Sample number 6 of header built with elementor
Sample number 7 of header built with elementor
Sample number 8 of header built with elementor
If you have the Astra Pro theme and aren’t using a page builder for your site, then you can also create a sticky header by using Astra Pro.

The Astra Pro theme is highly flexible and can is compatible out of the box with all popular page/theme builders. If you combine Astra Pro and your favorite page builder, you can build any type of website with this powerful combination.

Astra Pro gives you the ability to create a sticky header and transparent header. Along with options to also align the site logo and menu sections wherever you want.

header and sticky options settings for Astra

If you’re not using Astra Pro yet, It’s the right time to switch!

Conclusion

Adding a sticky header can help your site users navigate your website easier and drive clicks to all aspects of your site.

Elementor solves the issue of having to create sticky headers manually using Javascript and CSS. Thanks to Elementor sticky headers it couldn’t be easier to create a sticky header for your website.

Start using Elementor with the most compatible Astra Pro theme. And Build any type of website you want.

If you have any questions regarding sticky header, let us know in the comment section 🙂

Article by
Pratik Chaskar

LinkedInTwitter

Pratik Chaskar holds the pivotal role of CTO at Brainstorm Force, serving as the backbone of the company. Renowned for his organizational skills, strategic thinking, problem-solving attitude, and expertise in leading and executing plans, Pratik plays a crucial role in the BSF’s technological landscape.

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

9 comments
  1. Fai Profile Pic

    Hi
    I created a sticky header using Elementor Pro with Astra theme, but the problem is that sticky header flicker (jump up and then back to its original position within millisecond), if I scroll down starting from the very top of the page – the flickering of the header makes the site look unprofessional. Apart from this, the sticky header does work perfectly during normal scrolling of my page.

    I creating my website locally via MAMP PRO, so it’s not live. So I’m not sure if this a local issue or the a bug of elementor? I tried other themes but the problems still there.

    Have you come across is problem and any idea how to solve it?

    Many thanks!

    Any idea how to

  2. Suresh Patel Profile Pic

    I am building a website for my client using Astra and looking for a sticky header tutorial on google and I landed here.

    Thanks for sharing this tutorial.

  3. Daniel Profile Pic

    how can i style my a hover?

    selector.elementor-sticky–effects .current-menu-item > a { color:#3EDECD; }
    This styles my active. But i need hover too?

    Any help? Thanks!

  4. J Profile Pic

    Unfortunately, if using the fullpage for elementor extension, this method for creating a sticky header does not work when fullpage is enabled on a template.

  5. Neil DC Profile Pic

    Hello I been having an issue trying to find the correct code to change my text when I scroll down
    What I want is when I scroll down the text color will change. Can you help please. Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top