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));
}
Your point of view caught my eye and was very interesting. Thanks. I have a question for you.