Make sticky header | Elementor tutorial

In this tutorial I will show you how to make a sticky header using Elementor Pro.

Add this CSS ID for header section

sticky_header

Add this CSS Class name for header logo

logo

Add this CSS with header section

:root{
    --header-height: 70px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: rgba(0,0,0,.8);
    --transition: .3s ease-in-out;
}


#sticky_header {
    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
#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);
}
#sticky_header > .elementor-container {
    transition: min-height var(--transition);
}
#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));
}
#sticky_header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
#sticky_header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
#sticky_header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
#sticky_header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

1 + 10 =

[wpforms id="2272"]