Note
Two headers:
Header Classes: .header-1 & .header-2
Place .header-2 {above .header-1}
Note
.header-1 {main header | non-sticky}.header-2 {second header | sticky}
Option 1: The Reveal or Slide Down Header
Note: transform: translatey(-80px); change -80px to header height
/* Slide In From The Top Option */
.header-2 {
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}
/* End Of Slide In From The Top Option */Option 2: The Reveal or Slide Down Header
/* Fade In Option */
.header-2 {
opacity: 0;
-moz-transition: opacity .25s ease-out!important;
-webkit-transition: opacity .25s ease-out!important;
transition: opacity .25s ease-out!important;
}
.elementor-sticky--effects.header-2 {
opacity: 1!important;
}
/* End Of Fade In Option */