/* Existing styles Starts */
.scrolled-past-header .header__heading-logo-wrapper.mobile {
display: block !important;
}
.scrolled-past-header .header-wrapper {
background: var(--gradient-background) !important;
}
.scrolled-past-header .header__menu-item,
.scrolled-past-header .header__active-menu-item,
.scrolled-past-header .list-menu__item,
.scrolled-past-header .header__icon.link,
.header__active-menu-item,
.scrolled-past-header .disclosure__button,
.scrolled-past-header .header-localization:not(.menu-drawer__localization):not(.announcement-bar-localization) .localization-form__select,
.scrolled-past-header .header__heading-link .h2 {
color: rgba(var(--color-foreground), .85) !important;
}
.scrolled-past-header .header__heading-logo-wrapper.desktop {
display: none;
}
/* Hide image on desktop */
@media (min-width: 768px) {
.header__heading-logo-wrapper.mobile {
display: none;
}
}
/* Hide image on mobile */
@media (max-width: 767px) {
.header__heading-logo-wrapper.mobile {
display: none;
}
}
@media only screen and (min-width: 990px) {
.header-wrapper {
/* background: transparent !important;
position: absolute !important;*/
width: 100% !important;
top: 0px;
/* NEW LINE OF CODE STARTS */
overflow: hidden;
/* NEW LINE OF CODE ENDS*/
}
.header-wrapper:hover .header__heading-logo-wrapper.mobile{
display: block !important;
}
.header-wrapper:hover .header__heading-logo-wrapper.desktop{
display: none !important;
}
.header-wrapper:hover .header__icon.link,
.header-wrapper:hover .header__active-menu-item,
.header-wrapper:hover .list-menu__item,
.header-wrapper:hover details[open]>.header__submenu,
.header-wrapper:hover .disclosure__button,
.header-wrapper:hover .header__heading-link .h2 {
color: #212121 !important;
}
@media only screen and (min-width: 600px) {
.list-menu__item:not(.menu-drawer__menu-item) {
color: #000000;
background: transparent;
}
.list-menu__item:hover:not(.menu-drawer__menu-item) {
color: #000000;
}
}
.js .header-localization:not(.menu-drawer__localization) .localization-form__select:not(.announcement-bar-localization) {
color: #000000;
}
.header__icon.link,.header__active-menu-item{
color: #000000 !important;
}
.header__heading-link .h2 {
color: #000000 !important;
}
details[open]>.header__submenu .list-menu__item {
background-color: #fff;
color: #000 !important;
}
@media only screen and (min-width: 600px) {
.list-menu__item:not(.menu-drawer__menu-item) {
color: #000000;
background: transparent;
}
}
.js .header-localization:not(.menu-drawer__localization) .localization-form__select:not(.announcement-bar-localization) {
color: #000000;
}
.header__icon.link, .header__active-menu-item{
color: #000000 !important;
}
.header__heading-link .h2 {
color: #000000 !important;
}
}
/* Existing Code Ends */
/* ------------------------------------------------------------------------------------------------- */
/* NEW CODE STARTS HERE */
.header-wrapper {
transition: background 0.3s ease, position 0.3s ease;
position: static;
background: initial;
}
.header-wrapper::before {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff !important;
transition: top 0.5s ease;
}
.header-wrapper:hover::before {
top: 0;
}
.scrolled-past-header .header-wrapper {
background: var(--gradient-background) !important;
/* position: fixed;
top: 0; */
width: 100%;
}
.header__menu-item:after {
background-color: currentColor;
}
.header-wrapper {
overflow: visible !important;
}
/* Mobile-specific styles for transparent header */
@media screen and (max-width: 750px) {
.header-wrapper {
background: transparent !important;
/* position: absolute !important; */
}
.header-wrapper::before {
background-color: transparent !important;
}
.header__icon.link {
color: #000000 !important;
}
/* Fix transparent header background when drawer menu is open */
.section-header.menu-open .header-wrapper {
background: var(--gradient-background) !important;
}
.section-header.menu-open .header-wrapper::before {
background-color: var(--gradient-background) !important;
}
}
/* NEW CODE ENDS */