Shrink the header and logo on scroll: the simple and quick way to create this awesome Elementor design.
To begin with, create a new section with only one column
Set this section sticky
Then, set the custom positioning of the elements in the column to inline, and vertical align to middle.
For the logo and the nav menu element, and any other element you might want in your header.
If you use a vector graphic for your logo (SVG), you will need to set a width in PX.
When everything looks right, give the logo image a class name
Here ‘logoflex’ is the class name of the shrinking logo. Note that you should use the default Element Image element for this tutorial to work properly.
Now, add an empty section above everything else
Set these parameters for that section. This empty section is necessary so that the sticky header is not activated while you are at the top of the page. It won’t show on the front-end.
Finally, add this code to your page setting CSS
Gear icon in the lower left part of the screen
<script> /* Please login to get the code * The code will be for the Elementor Shrink Header & Logo on Scroll - Simple Method tutorial * Found at this URL https://element.how/elementor-shrink-header-logo/ */ </script>