Create Sticky Header without Plugin using 3 line of code

If you’re looking to make your header sticky, you’ve come to the right place! I’m going to show you how to create a sticky header in Elementor without installing any extra plugins—just a few simple lines of code.

Here is how you do it:

Step 1: Assign a CSS Class

First, open your header template in Elementor. Select the main container (or section) of your header. Under the Advanced tab, find the CSS Classes field and enter:

sticky-header

Step 2: Add the Code

Next, drag an HTML Widget anywhere into your header layout and paste the following code:

<style>
    .sticky-header{
            position: sticky;
            top: 10px;
            z-index: 1000;
        }
</style>

Method 2: For Astra, GeneratePress, or Kadence Themes

If you are using a popular theme like Astra, GeneratePress, or Kadence and want to make the default header sticky, you can do it directly through the WordPress Customizer.

1. Go to Appearance > Customize > Additional CSS.
2. Paste the following code:

.site-header {
    z-index: 100;
    position: sticky;
    top: 0;
}

This simple tweak keeps your navigation accessible at all times, improving the user experience without bloating your site with extra plugins!