Elementor Sticky Header Guide - How to Create Sticky Headers 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 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

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 🙂

Join 208,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

2 comments

Leave a Comment

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

Scroll to Top

Celebrating Astra's 900K+ Installs!

Days
Hours
Minutes
Seconds