Learn how to create a transparent sticky header in elementor with transition effects on scroll step by step.
First Part Code Snippet
selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.5)!important
}
selector{
transition: background-color 1s ease !important;
}Second Part code Snippet
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}
.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}100% SEO Guarantee
Save up to 41%
Small Business SEO Packages
