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

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 img{
transition: width .4s ease;
}

.elementor-sticky–active .logoflex img {
width: 96px !important;
}

Elementor Shrink Header & Logo on Scroll - Simple Method

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

Et voila! Thanks for reading!

15 Responses

    1. You are right. There was a slight error in my code that didn't account for images also being a link. this is fixed now... Just the code you got from earlier, and replace with what I have above.

  1. Best tutorial ever. This fixed my issue right away. My only suggestion for improving this article is to add something about adjusting the pixel size after pasting in the CSS code to better match your own logo design. I adjusted mine to 250 px.

    Also, instead of pasting the CSS at the page level, I pasted it in the Custom CSS area (under Advanced when editing logo). It worked well there too.

    Thank you soooo very much.

  2. Hello Thank you so much for this tutorial. Unfortunatly, this is not working on my website.. I copy an paste your code and followed all the steps but it doesn't change anything.
    Can you help me please ?

  3. Hi - great tutorial - thx. One thing I have noticed thought - when you scroll back up the page you get a 'white flash' across the screen which I'm assuming is the empty section. Even though I have coloured the background of that section to the same as the header bar, I still get a white flash - any fix for this please?

  4. This is wonderful and worked great for me! Do you have any recommendations to get the background color to change on the scroll? I tried using this but the solution to provide an empty section above makes this solution not work. Let me know what you think, thanks so so much!

    .elementor-sticky--active {
    background-color: rgba(0, 0, 0, 0.70);
    }

  5. Great that's nice thanks - how do you change your logo and menu from centered one above the other in the header to get them aligned side to side when shrinked? as it is on your site header 😉

    1. Hey Matthieu! Instead of setting width to 'inline', set to 'custom' (for both logo and nav menu element, and any other elemnt you might have in that row). Then , after scrolling, make it so the total is 100% (or 99%, if 100% doens't fit). before scrolling, total should be > 100%, so that the logo will be on it's own line.

      Then also set column setting > horizontal align > centered.

Leave a Reply