How to: Shrinking the header and logo on scroll with Elementor

This effect involves shrinking the header and logo once the user scrolls down, and the way this is implemented makes it so that the logo returns to the normal size set once the user scrolls back to the top.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

So, in one of my previous tutorials, I wrote about how to make the header hide and show whenever you scroll either up or down. That was quite popular (according to Google Analytics, that is) and I figured I could make another one to show you a different header effect that’s pretty cool and that you can just as easily implement on your site. In this one, you will learn the way to shrinking the header and logo on Elementor once the user scrolls down. The way this is implemented makes it so that the logo returns to the normal size set once the user scrolls back to the top.

 

Will I need anything special for this?

Is there any 3rd party plugin that I need to buy to make this effect happen? Fortunately, no. Only having Elementor Pro (to use the theme builder capabilities) will do! You’re also going to be using CSS, but don’t worry because the code that you need to insert will be added below so that you only need to copy and paste.

 

Is there a use case for this?

Well, that depends. You might have a case where you’re working on a website for a client and they – as client usually do – ask you to make the logo bigger, whilst having the entire header fixed on scroll. What’s going to happen then will make for a bad user experience, as there will be a big part of the website getting blocked from view.

 

If you’re designing the website on a big screen, such as a 22-24 inch screen this will not be as bad. However, once you take into account – and you should – the smaller desktop screens, as well as tablet and mobile, this can become a big deal.

 

Another use case where this can type of effect can work is when you want to have a transparent sticky header (a topic that was also written on this site here). So, this situation would be something like having the entire header without a background color and negative margins so that the background from the hero section is also in the header. Then, by combining the info of both tutorials, the header (including the logo) will get smaller and have color once the user starts to scroll down.

 

On to the tutorial

Ok, so having the use cases taken care of, it’s time to get to the tutorial. The first thing you need to is set up your header. For that, you want to create a one column section (doesn’t matter if it’s full width or boxed).

elementor shrink header on scroll

 

For the second step, you need to insert the widgets that will compose the header. My recommendation for this tutorial is to use the image widget linked to the homepage (so that it acts just like the site logo widget) and the nav menu widget. Both of this element need to have an inline width, which is done by heading to the advanced tab > positioning, and selecting “inline (auto)” from the dropdown.

shrinking header and logo on scroll

An important part on this step is to set the alignments. The first you need to set is right there on the positioning tab, the vertical align. Set that to middle. Then, head to the column and select middle in the vertical align dropdown as well. For the horizontal align, you have two options that are going to make the header look good. The first one is middle. That will set the elements like the images attached, where all elements are centered. You can also select space between, which will place both elements as far away from each other as possible.

 

Recommended reading: 3 different ways you can build the header menu on Elementor Pro

 

On to the next step. What you will need to do now is set the header as sticky. For that – and you have seen this in other tutorials – you want to click on the section, go to the advanced tab > motion effects and select top from the sticky dropdown. And, if you’re wondering which devices you want to make the header sticky you can leave all three as selected.

how to shrink logo and header with Elementor

 

Next, you’re going to take the image element on which you added the logo and give it a CSS class. For this tutorial, I went super straightforward and added the class “logo-shrink”. You can add whichever class you want, but know that you’re going to be using it in the CSS code that’s added below.

 

 

The fifth step involves adding an empty section above the one your header is on. Set the parameters from the image below 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.

 

*In the image is below the header section, but you need to switch their order. If not, the tutorial will not work.

 

And the final step. This is where the CSS code is involved. Copy the code below into the header CSS settings (you get there by clicking on the gear icon in the gray bar near the bottom and then advanced).

 

.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*/
}


*Remember to change the CSS class from “logo-shrink” to the one you used.

 

This is it! Adjust the PX in the width property of the CSS to your liking and make the proper adjustments on mobile and you’re good to go. Hope you liked it!

 

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

PREVIOUS AND NEXT POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • home
  • Contact
  • Agency Plans

Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!

Are you looking to redesign your website? build one from scratch? Or you just simply want to optimize it? Whatever your answer is to any of those questions, I can help you! Click the button below and fill up the form to contact me

Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want