The Ultimate Guide to Elementor Sticky Headers

Whether you’re an aspiring web developer or an ecommerce entrepreneur, your websites likely share some essential elements. For example, every site needs a clear header to help visitors navigate between different pages. However, if you use a page builder like Elementor to cut coding, you may be wondering if it’s still possible to make a sophisticated yet user-friendly Elementor sticky header.

Fortunately, using an Elementor header can provide your users with a streamlined way to explore your website. With this popular page builder, you can build a wide variety of headers that don’t disappear when users scroll down a site. This feature is what makes them ‘sticky’.

In this post, we’ll discuss how a sticky header works and the benefits of using one. Then we’ll show you how to make an Elementor sticky header with both the free and pro versions of the tool. Finally, we’ll provide you with additional customization options for your sticky headers using CSS. Let’s get started!

An Introduction to Elementor Sticky Headers

No two websites are the same. However, there are a few features that quality websites have in common.

If you’re running a multi-page site, one of these elements is a header. This is the horizontal bar at the top of any page that contains useful information.

Typically a header includes your navigation menu with pages such as About or Contact Us:

When visitors explore your page, they will likely expect an organized header to help guide them around your site. Since User Experience (UX) is key to the success of a website, you’d be wise to create a header that is intuitive and straightforward. That’s where a sticky header, designed with Elementor, can make a big difference.

Want to make a sophisticated yet user-friendly header? This guide has you covered Click to Tweet

How a Sticky Header Works

Before we learn how an Elementor sticky header works, let’s check out how a standard header behaves when you scroll down a page:

As you can see in the above example, this header contains a complex navigation bar with categories such as Sales, Clothing, Shoes, and more. These tabs will undoubtedly help shoppers find what they’re looking for. However, when you scroll down the page, the header disappears.

Users may find this frustrating, as it requires them to scroll back to the top of the page to access the navigation menu. Fortunately, a sticky header offers a simple solution.

By staying or ‘sticking’ in place at the top of your page, a sticky header can drastically improve the UX of your website:

When your site design includes a sticky header, your users can quickly jump to new pages without wasting time scrolling.

Additionally, with this fixed element, you can include your logo front and center at all times. This feature may help users recall your brand more easily and encourage them to stay on your site longer.

When You Should Consider Using a Sticky Header

Visitors will be less likely to get lost when exploring larger sites with a sticky header. As such, you may want to take advantage of this feature if your website has many pages. That’s why you’ll often see sticky headers on ecommerce sites.

A sticky header can be particularly useful if you want to include a search feature in your header. That way, as users are scrolling and realize they cannot find what they are looking for, they can quickly input a query into the search bar.

Additionally, a sticky header can be a game-changer if you run a monetized blog that shows all your posts on the homepage. In general, this header can ensure your website is maintainable and scalable.

However, if your site only has a single page, it doesn’t make much sense to transform your header in this way. Additionally, if you have a good amount of pages on your website, but each one is relatively short, you probably don’t need a sticky header either.

Overall, a sticky header reduces scrolling time and increases site usability and navigation. If you’re not sure if this feature would benefit your website, you may want to do a quick audit of your page lengths and then decide.

How To Create an Elementor Sticky Header

For this tutorial, we’ll walk you through the steps to make an Elementor sticky header. We’ll assume that you already have the Elementor plugin installed and activated on your site.

We’ll be covering how you can make this header with both the free version and Elementor Pro. You’ll likely be happy to know that you won’t need to learn HTML or significantly edit code to do this!

How To Create a Sticky Header Using Elementor (Free)

Elementor’s free version offers some powerful features for page-building. However, if you want to make changes to your headers and footers, you’ll need some additional (also free) tools.

With that in mind, let’s see how you can create a sticky header using Elementor!

Step 1: Install and Activate Your Essential Plugins

Fortunately, a few dependable tools can easily expand the functionality of Elementor’s free version.

Navigate to your WordPress dashboard to find your first tool. Go to Plugins > Add New and look for ElementsKit Elementor addons using the search function:

Install and activate this plugin as you usually would. When you finish this process, you’ll be taken to your main plugins page:

Now, click on Add New again to locate the Sticky Header Effects for Elementor plugin with the search bar:

Repeat the installation and activation process for this tool, and you’re ready for the next step!

Step 2: Create Your Menu

Before you can make any type of header, you’ll need a navigation menu. We’re going to make a simple menu with the most common elements. It will include a logo, pages, and a Call To Action (CTA).

To create your own menu within your WordPress dashboard, go to Appearance > Menus. Next to the Menu Name field, give yours a descriptive name. We’re going to call ours “Sticky Header Menu”:

Be sure to choose Header as the Display location. You may also want to select the box to add new pages to your menu automatically.

Next, you’ll need to add some pages to your menu. In the Pages section on the left, tick the boxes for any pages you’d like to include, then click on Add to Menu:

Then you’ll see your pages transferred to your menu on the right. Go ahead and click on Save Menu at the bottom right of your screen:

As you can see, we’ve added some basic pages, including Contact Us, About, and Sample Page. You may want to reorder your pages so that the sequence feels intuitive to visitors.

Step 3: Create Your Header

Now your navigation menu exists, but you can’t access it anywhere. That’s because you need to create a header for it.

To do this, go to the ElementsKit tab in your left-hand menu. If you haven’t already, you’ll need to click through a few ‘getting started’ pages at this point.

Everyone will likely have different preferences, so take your time selecting which features you want to activate. However, make sure that the Header Footer module is toggled to ON:

Now, go to ElementsKit > Header Footer:

This page will be empty since you don’t have any headers or footer templates yet. Click on Add New at the top of your screen to create your first header template:

On the above screen, enter a descriptive name and make sure Header is selected as the Type. Since you’re using the free version, this header will appear on the Entire Site.

Make sure you toggle the Activate/Deactivate switch to ON and click on SAVE CHANGES. Now you’ll be taken back to your templates page, where you can see your new header template listed:

You might also notice a green Active icon next to this header. However, it’s not live yet.

To complete your header, hover over it in the template list, and click on Edit in Elementor, just below its name. This will take you to the Elementor Builder screen.

Here, click on the ElementsKit icon:

On the following screen, select the Sections tab:

Scroll down a bit to find a header section you like, then click on Insert. We chose Header – Section 5:

As you can probably see, our navigation menu isn’t visible. So let’s go ahead and add it to our header template. To do this, hover over the navigation menu section of your header. In this case, it’s right in the center:

Click on this area, and your Menu Settings should appear in the left-hand panel. Now, locate the Select Menu field. In the dropdown, choose the menu you created earlier:

At this point, you should see the menu populate in your header template. Click on UPDATE in the bottom left corner of the screen, and your standard header is finished.

Let’s check out how it works in action:

As you can see, our header looks great. However, it disappears when we scroll down. Let’s see how we can make it stick.

Step 4: Make Your Header Sticky

For our final step, navigate to ElementsKit > Header Footer > Edit with Elementor. Then select your header and click on the center icon with six dots:

When you hover over it, you will see this allows you to Edit Section. Once you click on it, your edit options will appear in the left panel.

Click on the Advanced tab and scroll down to Sticky Header Effects. There will be a warning message that says the plugin doesn’t control the sticky header, but you can disregard that. Since we’ve also added the Sticky Header Effects for Elementor plugin, it will work just fine.

Now enable the Elementor sticky header by toggling the switch to ON:

Depending on your theme, your sticky header may look transparent. If that’s the case, you might want to make one stylistic change.

In your Edit Section panel, under Style, go to Background > Color and make sure you’ve selected a shade that will stand out against your normal background:

Then click on UPDATE. Now you can preview your site to check out the final result:

That’s it! This is a simple Elementor sticky header, but it can easily take your site to the next level.

How To Create a Sticky Header Using Elementor Pro

When using Elementor Pro, creating a sticky header is a bit simpler. You can add this feature to your site in just three easy steps.

Step 1: Create Your Menu

To make your menu, navigate to Appearance > Menus in your WordPress dashboard:

Give your menu a descriptive name, select Primary Menu next to Display location, and click on Create Menu:

At this point, you should have a few existing pages on your website. Select the pages you’d like to include in your menu from the left-hand panel.

Then click on Add to Menu, followed by Save Menu:

Now your pages should be populated on the right-hand side under Menu Structure.

Step 2: Create Your Header

Next, we’ll need to create our foundation. Let’s make a classic header.

To start, locate the Elementor tab in your left sidebar. Just below that, go to Templates > Theme Builder. The following page will look like this:

As you can likely see, with Elementor Pro, you can easily start designing every element of your site.

Click on the plus icon (+) on the Header element. Now you should see a pop-up that displays multiple header blocks that you can choose from:

If you have a pre-existing header template, you can select it under the My Templates tab. Otherwise, you might want to use one of the section blocks that comes included with Elementor Pro.

When you’ve made your selection, simply hover over the desired block and click on Insert:

Here, you’ll see that this block comes with its own logo, but our navigation menu has automatically populated. Now, click on PUBLISH:

The following screen will prompt you to determine your PUBLISH SETTINGS. Here, select ADD CONDITION to decide where you want to display your header:

You’ll likely want to select Entire Site next to INCLUDE. You can also exclude certain site areas by clicking the arrow next to INCLUDE and swapping to the alternative. When you’re happy with your selections, click on SAVE & CLOSE.

At this point, a pop-up message will appear in the bottom right corner of your screen. If it doesn’t disappear before you can click it, select the option to view your live site.

Alternatively, go back to your WordPress dashboard and preview your site by clicking on the house icon in the top left corner and then selecting Visit Site:

As you can see, our header is now functioning, but when we scroll down the page, it disappears. Let’s see what we can do about that!

Step 3: Make Your Header Sticky

Now let’s see how to create an Elementor sticky header with the pro tool!

Go to Templates > Theme Builder and select the header you just made. Then, click on Edit next to the pencil icon on the following screen. This will bring you back to the Elementor editor.

Hover over your header template, then click on the six-dot icon in the center. This will open your Edit Section panel on the left:

Now, navigate to the Advanced tab and locate the Motion Effects section. Here, enable Scrolling Effects by toggling the switch to ON:

Then, scroll down the Motion Effects section to find the Sticky field. In the dropdown menu, select Top:

Now, click on UPDATE. Keep in mind that depending on your theme’s color scheme, your Elementor sticky header may look transparent:

If that’s the case, and you don’t like how it looks, you can always change your background color. In your Edit Section panel, go to Style > Background and select Classic as your background type.

Now, select a new background color for your header template. You’ll want to choose a shade that is complementary to the rest of the page but also creates a nice contrast:

Since this is just an example, we’re simply choosing a gray color to make our header less transparent.

Now, click on UPDATE to save your changes. Go ahead and preview your final result:

That’s it! You’ll likely want to tweak the style and colors according to your brand. Just make sure to always save your changes when finished.

How To Use CSS to Enhance Your Elementor Sticky Header

When you implement an Elementor sticky header on your website, it can feel like a significant facelift for your site design. However, you may be interested in further customizations or more dynamic features.

Now that you know how to create a basic sticky header, let’s see how to take your design to the next level. You can do this by using Cascading Style Sheets (CSS) code in WordPress.

If you’re a beginner or don’t have experience coding, don’t worry. Enhancing your designs is a breeze with Elementor.

To do this, go to Templates > Theme Builder > Header:

Under Edit Section > Advanced > Custom CSS, you can add a small CSS snippet to make stylistic changes.

Types of Elementor Sticky Headers

Here are a few popular enhancements you may want to consider for your Elementor sticky header!

Transparent Sticky Header

Some themes may automatically set sticky headers to transparent. However, if you want to do this using CSS, you can utilize a code snippet such as this one:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Simply copy and paste this code into the Custom CSS field and adjust the fields to your preferences. This snippet alters your header’s background color, transparency, and height, with an animation effect:

The possibilities for this type alone are endless.

Shrinking Sticky Header

Another popular choice is a header that gets bigger and smaller as visitors scroll. Here is the code you’ll need for this type of Elementor sticky header:

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

If you’re not comfortable with such an extensive code chunk, you may want to consult Elementor’s guide to making a shrinking sticky header.

With this design, you’ll end up with this effect:

Though this header has a subtle touch, its sophistication may give your design a more professional feel.

Fade-In / Fade-Out

In addition to these trendy options, there’s also the fade-in / fade-out feature (also referred to as ‘reveal’). It looks something like this:

For this effect, you won’t need to touch any code at all. Simply navigate to your header in your theme builder. Then go to Edit Section > Advanced > Motion Effects > Scrolling Effects:

Here, click on the pencil icon next to the Transparency field and change the Direction to Fade In or Fade Out. Then, adjust your design to your preferences.

There are many options for these transparency effects, so we recommend checking out Elementor’s documentation. That way, you’ll be able to achieve the exact look you want.

With help from this guide, you'll be making Elementor sticky headers in no time Click to Tweet

Summary

Working with a trusted website builder is an excellent alternative to paying a veteran web developer to create your site. When using some of the best website design software, you can easily make the essential elements for any website. These include practical but beautiful sticky headers.

A sticky header can create a more pleasant experience for your users. You can choose from various dynamic header styles, including transparent and shrinking. Even better, you can make these stunning header designs with both Elementor Pro and its free version.

Designing your website is one of the first steps to launching it. However, you’ll first need reliable hosting. Check out Kinsta’s managed hosting plans to see how we can optimize your site’s performance!

The post The Ultimate Guide to Elementor Sticky Headers appeared first on Kinsta®.