Elementor Sticky Header: Scroll Changes Logo Size and Position

No extra plug-ins required! Elementor Pro required.

To begin with, create your main header, and the sticky header below it

Elementor Sticky Header Changes Logo Size and Position

Important:  the logo on the left needs to be in the same column as the nav menu. To accomplish this set the custom positioning to inline, and vertical align to middle. For both the logo and the nav menu element.

Elementor Sticky Header Changes Logo Size and Position

To make a section sticky, go in the advanced options and setup Sticky

Elementor Sticky Header Changes Logo Size and Position

When everything looks right, give the logo image a class name

Here 'logotitle' is the class name given to the logo in the Elementor sticky header section.

Then, add this code to your page setting CSS

Gear icon in the lower left part of the screen

.logotitle{
opacity: 0;
transition: all .4s ease;
margin-left: -230px; /*adjust this value to the approximate width of your logo */
}

.elementor-sticky--active .logotitle{
opacity: 1;
display:inline-block;
margin-left: 0px;
}

.elementor-sticky--active .elementor-nav-menu--main{
font-size: 21px!important;
}

@media (min-width: 768px){
.elementor-sticky--active .elementor-nav-menu a, .elementor-sticky--active .elementor-nav-menu a:focus, .elementor-sticky--active .elementor-nav-menu a:hover {
line-height: 6px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.elementor-sticky--active .elementor-nav-menu--main{
font-size: 12px!important;
}
}

Elementor Sticky Header Changes Logo Size and Position

Now, the logo will have disappeared

Go back at the top of the page and adjust the elementor sticky header to look exactly the way you want when it is not scrolled down.

Finally, scroll down a little bit and adjust the CSS (font-size) so that everything looks alright

Et voila! Thanks for reading!

Leave a Reply

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