Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Kishorchandth/c13f993a69965e1eacee1887608cf5d8 to your computer and use it in GitHub Desktop.
Save Kishorchandth/c13f993a69965e1eacee1887608cf5d8 to your computer and use it in GitHub Desktop.
Sticky header in WordPress using Elementor
/*
* Transparent to sticky header
*
*/
.sticky-header{
background-color: transparent!Important;
padding: 2% 0;
transition:
background-color 300ms linear,
box-shadow 300ms linear, padding 300ms linear;
}
.sticky-header.elementor-sticky--effects{
padding: 1% 0;
background-color: #F9F9F9!important;
box-shadow: #00000029 0 0px 20px 0;
}
/*
* Shrink Logo and Navigation on Scroll
*/
.site--logo.elementor-widget-image img{
width: 120px;
transition: width .3s ease-in;
}
.elementor-sticky--effects .site--logo.elementor-widget-image img{
width: 100px;
}
/*
* Shrink Navigation font-size and change color on scroll
*/
.nav-menu .elementor-nav-menu--main .elementor-item{
color: #fff;
font-size: 1rem;
transition: color 300ms ease-in, font-size 300ms ease-in;
}
.elementor-sticky--effects .nav-menu .elementor-nav-menu--main .elementor-item{
color: #000;
}
/*
* Change Logo on Scroll
*/
.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
width: 64px;
transition:
opacity 20ms linear,
width 300ms linear;
}
.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
width: 64px;
}
.site--logo-red.elementor-widget-image img{
opacity: 0;
}
.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
opacity: 1
}
.elementor-sticky--effects .site--logo.elementor-widget-image img{
opacity: 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment