Shrink header

PRO

A smooth header transition where the height of the header and logo shrinks on sticky.

Copy

Unlock with Pro

Released

3 weeks ago

Category

Code, Navigation

Built with

Widgets

Container, Heading, Image, Wordpress menu

Need help?

Custom code

CSS

How it works

When the header scrolls as sticky, its padding shrinks and the logo scales down together. No JavaScript, just Elementor sticky plus a few lines of CSS.

Custom css

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/* shrinking header section */
.sticky-header {
background: transparent;
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
width: 100% !important;
padding-top: 20px!important; /* header height at top of page */
padding-bottom: 20px!important; /* header height at top of page */
}
.sticky-header.elementor-sticky--effects {
background: #fff !important; /* header background once stuck */
padding-top: 10px!important; /* shrunk header height */
padding-bottom: 10px!important; /* shrunk header height */
box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05); /* shadow once stuck */
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
width: 100% !important
}
.elementor-sticky { width: 100% !important }

/* shrinking logo image */
.shrinking-logo img {
width: 200px!important; /* logo size at top of page */
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
}
.sticky-header.elementor-sticky--effects img {
width: 120px!important; /* shrunk logo size */
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
}
@media screen and (max-width: 767px)  {
/* shrinking logo image */
.shrinking-logo img {
width: 150px!important; /* logo size at top of page (mobile) */
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
}
.sticky-header.elementor-sticky--effects img {
width: 130px!important; /* shrunk logo size (mobile) */
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
}
}