Header Sticky
Last updated
Last updated
Once you have your regular header ready to go, this section will cover how to make it shrink.
To create this effect, you’ll rely heavily on some custom CSS. However, we’ll give you the exact code that you need and walk you through customizing it to match your site.
To get started, use Elementor Theme Builder to edit the template for your header.
In your WordPress Dashboard, go to Appearance>Header Footer & Blocks and click Edit With Elementor for your header template.
To make sure your header works with the CSS code that you’ll use in the next sections, you’ll want to perform a little housekeeping.
First, open the settings for the section that contains your header.
In the Layout tab, set the HTML Tag drop-down equal to header:
Also in the Layout tab, set the header’s Minimum Height equal to 90px:
You can customize this later on. But start with 90px for now.
Then, go to the Advanced tab and set the header section’s CSS Classes equal to sticky-header:
Finally, open the image widget that contains your logo and go to the Advanced tab. Then, set your logo image’s CSS Classes field equal to logo:
To make sure your header sticks to the top as users start scrolling, you can use Elementor’s Motion Effects feature.
Open the settings for the section that contains your header. Then, go to the Advanced tab and open the Motion Effects settings:
Set the Sticky drop-down equal to Top.
Make sure that the Sticky On box only includes Desktop – you’ll need to delete the other devices.
Set the Effects Offset equal to 90.
With that housekeeping out of the way, you’re ready to add the custom CSS code.
Here’s the basic code that you’ll use — in the next sections, we’ll walk you through customizing it to match your needs:
If you’re using Elementor 2.9 and above, you can add this CSS via Global Style rules:
Click the hamburger menu icon in the top-left corner of the Elementor interface
Choose Theme Style under the Global Style section
Select Custom CSS (once the Theme Style interface has opened – it will be blue instead of the “normal” Elementor red)
Add the CSS code
If you’re not using Elementor 2.9 yet, you can open the settings for the header section and go to Advanced → Custom CSS.
Now, let’s go through how to customize this CSS to match your needs. While you can edit the CSS directly in the Elementor interface, we’d recommend using a proper code editor such as Visual Studio Code or Atom. Both editors are free and work on Windows, macOS, and Linux.
We’ll be using CSS Custom Properties (or CSS Variables). You can use these to customize the effects of your shrinking header. Once you edit the custom property one time, it will automatically update the entire CSS code to match.
In total, there are five variables that you can customize. You also don’t have to customize them — it’s totally fine to leave them as the defaults if you already like how things work!
Here are the five CSS variables, as well as the default values in our example code:
–header-height: 90px;
–opacity: 0.90;
–shrink-me: 0.80;
–sticky-background-color: #0e41e5;
–transition: 300ms ease-in-out;
You’ll see these listed at the top of our example code – the custom properties are the items that come after the double dash “–“. All you need to do is update the value that comes after the colon and before the semi-colon.
For example, if you want to change the header height to 100px, here’s how it would look before and after:
Before: –header-height: 90px;
After: –header-height: 100px;
Let’s go through your options for the five variables:
Sticky Background Color (--sticky-background-color)
Values accepted: Color names (i.e. black) or hex values (i.e. #000000).
The Sticky Background Color property controls the background color of the “shrunken” header that appears as visitors scroll down. You can customize it to use any color that you want — it doesn’t need to match the original color of your header if you don’t want it to.
For example, in the Digital Agency template, our header background initially starts with a gradient. However, as visitors scroll down and the header shrinks, it changes to use a solid blue background (you can see this in the example video from the beginning).
Header Height (--header-height)
The Header Height property dictates the height of your header – it needs to exactly match the height of your header section in Elementor’s settings. Earlier in the tutorial, we had you set this to 90px, which is a good starting value.
You can change the height if you want, just make sure to change the height for both the CSS property and the header section’s settings.
However, we recommend not exceeding 100px for the header height as larger headers can cause problems with the shrink effect.
Opacity (--opacity)
Values accepted: 0 to 1.
The Opacity property controls the degree to which your shrinking header is transparent:
0 – the header will be completely transparent
1 – the header will be opaque (no transparency)
In our example code, we’ve set the opacity equal to 0.9, which makes it almost completely opaque. You can adjust this value to meet your needs. To make it more transparent, just lower the number towards 0.
Shrink Me (--shrink-me)
Values accepted: 0 to 1.
The Shrink Me property controls the degree to which your header and logo shrink when a visitor starts scrolling down. For example, with the default value of 0.80, your header and logo will shrink to 80% of their initial size.
While you can adjust this value, we recommend leaving this value as the default.
Transition (--transition)
Values accepted: 100ms to 1000ms.
The Transition property controls how long it takes for the header to shrink from its original size to the “shrunken” size.
As with the Shrink Me property, we recommend leaving this as the default, though you can edit it if desired.
Some Other Technical Notes
In addition to the five CSS custom properties that we detailed above, here are a few other technical notes.
First off, we’re using another CSS property called backdrop-filter that creates a cool glass-like effect. You can also customize this if you want. Or, if you don’t like the effect, you can completely remove this property.
Second, the navigation menu in our example uses an underline pointer effect with Drop Out animation. The CSS code that we used takes care of this as well. If you know your way around CSS, you can also customize these to meet your needs.
And that’s it — you just created a shrinking sticky header with Elementor!
If you’re having issues with the CSS from our tutorial, here are a few troubleshooting suggestions.
First off, the header won’t shrink if its content is too big. This is why we recommend keeping your header’s height to around 100px at max. If you have a very tall header, try reducing the height to ~100px.
Second, while this code should work for all WordPress themes, your specific theme might be causing issues. For reference, we’re using the free Hello theme for our example.
You can try switching to the Hello theme to see if your shrinking header works with Hello. If it does, that probably means there’s an issue with your theme — you can try reaching out to your theme’s developer for help.
