Skip to content

Instantly share code, notes, and snippets.

@unwiredtech
Created February 15, 2021 04:40
Show Gist options
  • Save unwiredtech/38ad28a09d3678e23e6eb0339eb00b62 to your computer and use it in GitHub Desktop.
Save unwiredtech/38ad28a09d3678e23e6eb0339eb00b62 to your computer and use it in GitHub Desktop.
/* Add Class "sticky-header" to the header element */
header.sticky-header {
--header-height: 120px;
--opacity: 1;
--shrink-me: 0.70;
--sticky-background-color: #ffffff;
--transition: .3s ease-in-out;
transition: background-color var(--transition),
background-image var(--transition),
backdrop-filter var(--transition),
opacity varheader.sticky-header .elementor-nav-menu .elementor-item(--transition);
}
header.sticky-header.elementor-sticky--effects {
background-color: var(--sticky-background-color) !important;
background-image: none !important;
opacity: var(--opacity) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid #c6c6c6;
}
header.sticky-header > .elementor-container {
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc(var(--header-height) * var(--shrink-me))!important;
height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
padding-bottom: 32px!important;
padding-top: 32px!important;
color: #c62741 !important;
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item:hover{
color: #ffffff !important;
}
header.sticky-header > .elementor-container .logo img {
transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
max-width: calc(100% * var(--shrink-me));
content: url('Link to shrink Logo');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment