Transparent Sticky Header Elementor

https://youtu.be/B7gSNs4d2hs

In this tutorial I teach how to create a Transparent Header in Elementor Pro

This is the CSS you will need

header.sticky-header {--header-height: 90px; / * final height when it shrinks - must be the same value you put in the min-height of the section * / --opacity: 0.90; / * final opacity when shrinking. if you want it to be more transparent, put smaller numbers like eg 0.3 * / --shrink-me: 0.80; / * percentage of how much the header will shrink, as well as the logo. if you want it to shrink more, put smaller values like ex 0.5 (50% equivalent) * / --sticky-background-color: #FFF; / * header background color after shrinking. it doesn't have to be the same original color * / --transition: .3s ease-in-out; / * time it takes to shrink, this is taking 0.3 seconds. the higher the value, the longer the transition effect takes * / transition: background-color var (- transition), / ** / background-image 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; } 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)); } / * if you liked this tutorial, visit my website rodrigomilano.com.br and subscribe to the channel * /