Share
Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on whatsapp

Elementor, by far, is the most powerful and advanced page builder out today for WordPress, which is why I am such a fan. The one main reason I fell in love with Elementor is the possibilities of what can be created without having to do intensive development work. It has been over two years as an Elementor user, and I’m still discovering new tricks.

And one of those possibilities I want to show you today is what can be done using Elementor’s sticky header and navbar. Primarily the shrinking logo effect when the page scrolls down and how to change logo size when scrolling in Elementor.

Creating effects with Elementor’s Sticky Header and Navbar

Changing the logo size on scroll is just of the many effects that can be done using Elementor’s sticky navbar. And the method we are going to be using in this Elementor tutorial can be applied to other scrolling effects. There is the transparent to solid background effect, background and link colors changing on scroll, and you can even switch logos from a light logo to a dark logo in Elementor using the sticky navbar.

For this tutorial, we will keep it simple and focus on just one thing at a time. How to make your logo shrink on scroll with Elementor using El’s sticky navbar. Let’s dive in!

First, what you will need for this tutorial.

To achieve the shrinking logo effect on a sticky header, you will NOT need any 3rd party plugins or widgets. All of this can be made with just Elementor. But you will need the pro version of Elementor. So if you don’t have the pro version yet, bookmark this post, go grab it, and then come back. The pro version of Elementor is well worth the cost for the value you will get. Here is a link to find the pro version.

Step 1: Building a Menu in Elementor’s Theme Builder

Navigate to your templates and select ‘Theme Builder.’ From here, add a new header (only if you do not have one yet. If you already have a header built, go to edit that header template).

Make sure to add your Nav menu and Logo/Image widget into the section you want to stick to the top of your site. For your logo, I recommend using the Image widget instead of the Site Logo widget as you will have more flexibility with the Image widget.

Step 2: Setting Up Your Logo with Elementor

Make sure to use pixels (px) when giving your logo it’s size. This will help when selecting the size you want your logo to shrink.

Navigate to the ‘Advanced’ tab, and inside the CSS Classes, add’ sticky-logo.’ Make sure it looks just like the image below.

Step 3: Setting up the Sticky Header & Sticky Navbar in Elementor

Here we will add the sticky effect to the section of your header. Select the edit section for the section you want to stick to the top of the page. Next, navigate to the ‘Advanced’ tab. Here you will open up the ‘Motion Effects’ area. In the ‘Sticky’ option, selected ‘Top.’ 

You will notice a few new options open up when you turn on the stick. You will have an option for devices. Here you can choose which device you want your menu (the section) to stick on. For example, you might only want your menu to stick on desktop and tablet but want to disable the sticky menu on mobile. Simply click the ‘X’ on the device you would like to turn off.

There will be two more new options, ‘Offset’ and ‘Effects’ Offset.’ The ‘Offset’ option moves your section up or down. Leave this at 0. For this tutorial, we will not be touching the Offset selection. 

What we need to focus on is the ‘Effects Offset.’ This is where we can control how far down the page the effects take place. For example, if you select 100 in the Effects Offset, your effects (in this Elementor’s tutorial, it will be a shrinking logo), your logo will shrink when you scroll 100 pixels. So choose how far you want your visitors to scroll until your logo shrinks on scroll. Just make sure not to leave on 0. If you leave your Effects Offset on 0, no effects can happen and will not work.

Step 4: Making The Logo Shrink On Scroll in Elementor’s Sticky Header

Here, we will need to add a snippet of CSS. If you do not know CSS, that is totally fine. Just copy and paste this bit off CSS.

/*--SHRINKING LOGO--*/
/*--New class when sticky is turned on 'elementor-sticky--effects'--*/
/*--give the logo image a class called 'sticky-logo' --*/

.elementor-sticky--effects .sticky-logo img {
	width: 120px!important;/*--edit the pixels to change to desired shrinking size--*/
}

.sticky-logo img {
	transition: .5s all ease-in-out;
}


@media screen and (max-width: 767px) {
    .elementor-sticky--effects .sticky-logo img {
	width: 90px!important;/*--edit the pixels to change to desired shrinking size for mobile--*/
}
}

Navigate to the Edit Section, then to the ‘Advanced’ tab, and at the bottom, open up the ‘Custom CSS’ area. Here is where you will add the CSS snippet provided. After this, you should see the logo already shrinking when scrolling. The next step is to choose how much you want your logo to shrink.

Editing the CSS to change the size your logo shrinks on scroll.

There are only three selections in the CSS, and there are notes to help better understand. 

The first section is where you can select how much you want your logo to shrink. You will notice it’s in pixels. This is why, in the beginning, we determined your logo size in pixels to make it easier to decide how much you want to make it shrink.

The second section is how slow or fast you want the transition effect. It is set at .5s, which is .5 seconds or half a second. You can edit this number to change the transition effect. Just change the number.

The third section if for mobile. Since you most likely will make a mobile version of your menu with a smaller logo, in this section, you can make the logo size also shrink smaller to keep the effect for mobile.

The Possibilities with Elementor’s Sticky Headers 

There are several ways to add effects to your navbar and menus within Elementor. Effects like transparent to solid background on scroll, changing the colors to your header’s background, and menu links on scroll, shrinking the size of your entire navbar on scroll, even switching your logos on scroll. And all can be done with the same method.

When using the Sticky effect with Elementor, you can create a class that is only active when hitting the offset effect (elementor-sticky–effects). With this, just by applying a bit of CSS, we can get creative and open up new possibilities. Creating effects like these can make your site more stylish and provide a better user experience to your site’s visitors.

We’ll be releasing more articles on effects for Elementor’s sticky headers and navbars soon. So make sure to subscribe to our newsletter to receive notifications for future releases of Elementor tutorials, tricks, and hacks.

For a better visual reference, check out this tutorial on YouTube.

Table of Contents

Stay up to date with more featured articles.
If you found useful share!
Facebook
Twitter
LinkedIn
Reddit
Pinterest

9 thoughts on “How To Make a Logo Shrink in Elementor’s Sticky Header”

    1. Jeffrey Dalrymple

      Hey Krupa, I know I am getting to your comment late. If you haven’t got it working yet, let me know. It should not matter what Elementor addon you are using and should work the same. Just use either the image or logo widget by Elementor.

  1. Awesome!!!!

    In my case i added a second logo on my sticky bar below the top bar and gave it a width of 0% and when scrolling is activated it grows to 60% width. I was looking for this way for some time, didn’t realize it is that simple.

    Thanks a lot for this guide.

  2. I am brand new to Elementor and this worked beautifully. Thank you!

    I do have a question, though:

    My sticky nav menu is a section with my logo above and the nav menu directly below. I have a top-margin setup on the logo so that there is some breathing room between the top of the browser.

    How would I change the CSS to change that top-margin to 0 when the shrink effect takes place? This would be especially useful on mobile where every pixel counts. I’ll keep toying around with it and learning the basic CSS, but I thought I’d ask here first. Thanks!

    1. Jeffrey Dalrymple

      Glad to hear this worked for you. For the margins, it would be the same technique, you would just target the section’s margin and change that with the .elementor-sticky–effects class. I made a video to explain more how to use this class and CSS with El’s sticky to do more. CHeck it out here – https://youtu.be/_mjgZDQvCUg

Leave a Comment

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