Owning a website becoming expensive?

No more! In our library, you will find the best premium WordPress plugins and themes for a fraction of the cost of the original prices. Browse Our Library

How to Create a Sticky Header with Elementor

How to Create a Sticky Header with Elementor

In this article, we are going to show you how to create an Elementor 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.

Why Create a Sticky Header

The reason to create an Elementor sticky header is to keep it easy for our site visitors to navigate the site.

Look, if a visitor spends some time on our website, reading a blog post, he already scrolled down the page. 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.

To create an Elementor sticky header we will need to target the header section. Thus, navigate to Templates -> Theme Builder -> Header and click on Edit with Elementor.

Navigate to elementor theme builder

In the Elementor edit screen, target the header section with the columns and go to the Advanced tab.

Expand the Motion Effects tab, look for the Sticky option and change it 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

After you have done, click on the update button and visit your live website. You suppose to see the sticky header at the top of the screen all the time even while you scroll down the page.

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

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.

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

Hidden Behind the Content

Sticky header hidden by content

Sometimes, when scrolling down the page, the header will be covered by the other sections.

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

Sometimes, a big sticky header can take a big part 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.

Elementor widget libraries

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, if we want our header to get smaller, we need to inspect which elements we need to change or adjust.

In our header, we have two columns. Our website logo on the left and the menu 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.

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 will get executed and will reduce the image width and height sizes but that will not be enough.

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 work only when the --effects class will get executed and will reduce the top and bottom padding of the links from 35px to 20px.

The changes made 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.

Feel free to watch the video below for clarification.

Conclusion

In this article, you learned how to make your website header sticky and why you should. If you have any questions 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