Elementor Shrink Header & Logo on Scroll - Simple Method

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.

logoflex

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.

Elementor Transparent Header Change Colors On Scroll Easily

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>
Elementor Shrink Header & Logo on Scroll - Simple Method

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

Et voila! Thanks for reading!

Tagged

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

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

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

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

  7. 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);
    }

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

    1. There was a small error in the CSS code. Actually the code itself was fine, however WordPress was applying some auto formatting and transforming it a bit.

      Now I updated the code and prevented auto formatting from WordPress, so get the code again, import it in your page, and it should work.

  15. Maxime - I am looking for a solution to shrink-minimize the header area. Fair bit going on in the header area (website is a portal) which makes it a challenge on a mobile view. All the site (and header area) is now on flex containers. Latest production build of Elementor Pro.

    Thanks, Michael

  16. LOL ... I used to use that method years ago (when I was on Divi ... before Elementor) but I managed to FORGET about that method.

    Thanks for the memory jog. Appreciate your good work and quality code.

    Michael

  17. However, I also have a situation where the site is built out with static pages in mind. So CSS is preferable (vs the Popup approach). So would this particular piece of code work with containers as described?

Leave a Reply