Sticky Menu In Elementor
15 October 2021
Subscribe To My YouTube Channel For More Upcoming Videos
1. Edit Your Header Template in Elementor
In your WordPress dashboard, go to Templates → Theme Builder and click Edit With Elementor for your header template.
2. Perform Some Basic CSS Housekeeping
- 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 70px.
- Also in the Layout tab, set the header’s Minimum Height equal to 70px.
- 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:
3. Set Up Motion Effects to Make Your Header Stick
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.
4. Add Custom CSS Code
open the settings for the header section and go to Advanced → Custom CSS. Copy below code
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));
}