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

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;
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!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >


Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!


Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

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