BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How to Create a Sticky Header with Elementor

You are currently viewing How to Create a Sticky Header with Elementor

A sticky header will stay at the top of the page and will scroll down or up with the page. It’s becoming more popular in the last few years and many websites are now transforming their regular header into a sticky one.

Being one of the most versatile page builders for WordPress, Elementor enables us to build a header and make it sticky very simply.

In this article, you’ll learn how to create a sticky header with Elementor.

Why Create a Sticky Header

Elementor is now one of the most popular WordPress page builders plugins and for a good reason.

With their theme builder feature, we can build great elements such as headers, footers, and sidebars in a breeze without any coding skills.

Page headers are one of the most important sections of your website. It contains links and helps your visitors to easily navigate between your site pages.

The header appears at the head of the document and disappears from the sight view when we scroll down the page. Thanks to Elementor, we have the option to make the header sticky and keep it on sight view even while scrolling.

A sticky header will make the site navigation and the user experience way easier because it will keep the menus’ links visible at all times.

When the header links are invisible, there is a better chance to click on the back button and return to Google. But, if the header is sticky, it will increase the chance to click on the links and spend more time on your website.

How to Make a Sticky Header with Elementor

Elementor is a very flexible page builder with many options to edit and design every section of the page. The header is one of the sections that we can edit.

We can use the theme builder feature of the pro version of Elementor to create and display a header on our website.

Step #1: Edit the header template

If you don’t already have a header, you’ll need to create one. Navigate to Templates -> Add New and create a new header.

If you already have a header (which I assume you do), navigate to Templates -> Theme Builder -> Header and click on Edit with Elementor.

Navigate to elementor theme builder

Once the visual editor is loaded, we can move forward to set it up.

Step #2: Advanced tab

Click on the setting of the section that you would like to target and navigate to the Advanced tab.

Expand the Motion Effects option, and change the sticky field to top.

Under the Sticky On option, you can decide on which devices the header will be sticky on. The default is set to all devices but you can remove any device that you don’t want.

Change elementor sticky header to top

Once done, update the changes and move on to the next step.

Step #3: Test the header

If done correctly, the header should now be sticky to the top of the page and scroll down or up with the window.

Navigate to any page that triggers the header and make sure it’s scrolling down the page.

Most times, that did the trick, and your job is done. Sometimes, however, the sticky header will not function as expected and we will need to do some adjustments to fix it.

Troubleshooting for Sticky Headers

After making the header sticky you may notice that there are some problems with it. Here are the couple most common issues that may happen:

  • The Sticky Header is Transparent With No Background Color.
  • The header is hidden behind the content.

Don’t worry, both issues are easy to fix, let’s start with the first one.

Transparent With No Background Color

Sticky header with transparent background

That usually happens when the header background color is white but you did not define it to be while. It is actually a transparent color and the default color of the body tag is the color you see.

Read our article on how to make a transparent header with Elementor to learn more about the subject.

To fix this issue, you’ll need to define and set the background color of the header to be white as well.

Elementor widget libraries

Under the Style tab of the header set the Background to solid or gradient and pick your desired color.

Hidden Behind the Content

Another common issue is that when scrolling down the page, the header will be covered by the other sections.

Sticky header hidden by content

That happens because the other elements have a bigger z-index. To fix that, we will need to increase the z-index value of the header section.

Navigate to the Advanced tab of the header section. Look for the Z-Index option and enter 9999. Click on the Update button and check it again. If you don’t see any change, increase the number by adding another 9 to 99999.

Sticky Header and Effects Offset

A big sticky header can take a large portion of your screen view and bother the readers of your website. The goal of a sticky header isn’t to take the focus off your content but to help your visitors to navigate easier.

In those cases you’ll need to adjust the display of the sticky header and Elementor can help us do it. However, you’ll need to inspect some parts of your header and modify the CSS to create the right result.

Let’s take Kinsta for example. 100px after scrolling down the page, their header gets smaller and gets a white background color.

Sticky header of Kinsta

To achieve similar results, go to the advanced tab and change the effects offset to 100 (or any other number).

By doing so, Elementor will add a class called --effects to the header section every time you’ll scroll below the entered number (100px in our case).

Now, we just need to apply the styles we want for the --effects class based on what we want to achieve.

For example, to make the header smaller, we’ll need to inspect which elements to change or adjust.

In our header, we have two columns. Our website logo is on the left and the menu is on the right.

When we inspect the logo image, we can see that the default width of the logo is 120px. Because the header takes the height of his child elements, we will need to change the height of the elements.

Inspect the default image size

Images are keeping the auto ratio of width and height so changing the width of the image will change the height accordingly. Therefore, we can change the width of the image to 90px for the --effects class and the height will decrease as well.

Apply the CSS

To add custom CSS to the Elementor header section click on the Custom CSS option under the Advanced tab. To target the current section, we will need to use the selector along with the child section class.

In our example, because we want to target the logo image of the header section, we will use this CSS:

selector.elementor-sticky--effects img {
width: 90px;
padding: 5px;
}

The CSS code above will work only when the --effects class was added and will reduce the image width and height sizes. However, adjusting the logo by itself isn’t enough and we should target the links as well.

Inspecting the menus’ links reveals that their heights are set by the top and bottom padding and are 35px each. That is actually the reason why changing the image size by itself isn’t enough. Thus, change the height of the header by changing the top and bottom padding of the menu items.

Inspect the padding of menu items

To do that we can use the CSS below:

selector.elementor-sticky--effects .elementor-nav-menu--main .elementor-item {
padding-top: 20px;
padding-bottom: 20px;
}

The CSS code above will reduce the top and bottom padding of the links from 35px to 20px.

Both changes to the logo and links will change the height of the header and will display the desired result.

To smooth the height transition of the elements we can use the CSS below:

selector > .elementor-container {
transition: all 1s;
}

The adjustments above will work for most scenarios, but it’s not guaranteed to work for all. Try the CSS above with your header first. If it doesn’t work, inspect and find which elements define the header’s height and modify them.

Some plugins were made for Elementor that will help you to design the sticky header without any CSS. One of them is JetBlocks and you can watch some videos on how to use it here.

Conclusion

In this article, you learned why and how to make a sticky header with Elementor.

If you have any questions, or you would like to get specific CSS for the theme you’re using, please let us know by leaving a comment down below.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply