Elementor Shrink Header & Logo on Scroll - Simple Method

No extra plug-ins required! Elementor Pro required.

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

Elementor Shrink Header & Logo on Scroll - Simple Method

Set this section sticky

Elementor Sticky Header Changes Logo Size and Position

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.

Elementor Sticky Header Changes Logo Size and Position

If you use a vector graphic for your logo (SVG), you will need to set a width in PX.

Elementor Shrink Header & Logo on Scroll - Simple Method

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 elmeent 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.

Simple Elementor Transparent Header Changing Background Color

Finally, add this code to your page setting CSS

Gear icon in the lower left part of the screen

.logoflex .elementor-image img{
transition: width .4s ease;
}
.elementor-sticky--active .logoflex.elementor-widget__width-auto.elementor-widget div>img {
width: 96px; /*adjust this value to size your logo after scrolling down*/
}

Elementor Shrink Header & Logo on Scroll - Simple Method

Everything should work fine now! Adjust the CSS to your liking!

Et voila! Thanks for reading!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

x

Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!

present

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *