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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*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; } } |
