This is purely code just to apply a logo shrink on scroll and also applies a border on the bottom of the header using elementor.
Make sure you add the id of the logo to #mylogo, and the header section add the ID of #myheader.
Then add the code below to the section css in the elementor panel.
Also use the offset effect in the panel to 100
/*only affects desktop and tablet
set logo size manually in mobile
Makes a border at the bottom of the header go white after scroll
*/
@media only screen and (min-width : 720px) {
// logo size default
#mylogo {
width: 90%;
transition-duration: 0.5s;
}
// when sticky effect activated
selector.elementor-sticky--effects
#mylogo {
width: 65%;
transition-duration: 1s;
}
selector.elementor-sticky--effects#myheader {
border-bottom: 2px solid #fff;
}
}
