logo is going back to white when hovering the header while scrolling
please help its urgent
hey guys when im scrolling the header items is proper as i wanted but as soon as i am hovering the header while scrolling it the logo goes back to white all things are fine except logo pls help urgent
transparent header this is good
when hovering it
this is when im scrolling looking nice
but as soon as i hovered the header in state of scrolling the logo goes white
below is css in header.liquid
<style>
{% unless settings.logo %}
.header__heading-link .h2 {
display: block !important;
}
.header__heading-link .header__heading-logo-wrapper {
display: none;
}
{% endunless %}
{% if section.settings.enable_transparent-header and section.settings.color-transparent %}
.header-wrapper {
background: transparent;
position: absolute;
width: 100%;
top: 0;
display: block;
}
.scrolled-past-header sticky-header {
background: var(--gradient-background) !important;
/* color: rgba(var(--color-foreground), 0.75); */
}
/*
.scrolled-past-header sticky-header .header__icon.link,.scrolled-past-header sticky-header .header__active-menu-item,.scrolled-past-header sticky-header .disclosure__button,.header__heading-link .h2{
color: rgba(var(--color-foreground), 0.75) !important;
}
*/
.scrolled-past-header sticky-header .header__heading-link {
display: block !important;
}
.scrolled-past-header sticky-header .logo-transparent {
display: none !Important;
}
.header__heading-link {
display: none;
}
.logo-transparent {
display: block;
}
/*
@media only screen and (min-width: 600px) {
.list-menu__item, details[open]>.header__submenu {
color: rgba(var(--color-foreground), 0.75) !important;
background: transparent;
}
}
*/
@media only screen and (min-width: 600px) {
.list-menu__item,
details[open] > .header__submenu {
color: {{ section.settings.color-transparent }}
!important;
background: transparent;
color:white;
}
.header__icon.link,
.header__active-menu-item,
.disclosure__button,
.header__heading-link .h2 {
/* color: {{ section.settings.color-transparent }}
!important; */
color:white
}
.scrolled-past-header sticky-header .list-menu__item,
details[open] > .header__submenu {
color: rgba(var(--color-foreground), 0.75) !important;
}
.scrolled-past-header sticky-header .header__icon.link,
.scrolled-past-header sticky-header .header__active-menu-item,
.scrolled-past-header sticky-header .disclosure__button,
.header__heading-link .h2 {
color: rgba(var(--color-foreground), 0.75) !important;
}
{% endif %}
{% if section.settings.enable_transparent-header and section.settings.only-homepage and template != 'index' %}
.header-wrapper {
position: relative;
background: var(--gradient-background);
}
.header__icon.link,
.header__active-menu-item,
.disclosure__button,
.header__heading-link .h2 {
color: rgba(var(--color-foreground), 0.75);
}
{% endif %}
{% if section.settings.color-transparent and section.settings.only-homepage and section.settings.enable_transparent-header and template != 'index' %}
@media only screen and (min-width: 600px) {
.list-menu__item,
details[open] > .header__submenu {
color: rgba(var(--color-foreground), 0.75) !important;
background: transparent;
}
}
.header__icon.link,
.header__active-menu-item,
.disclosure__button,
.header__heading-link .h2 {
color: rgba(var(--color-foreground), 0.75) !important;
}
.header__heading-link {
display: block;
}
.logo-transparent {
display: none;
}
{% endif %}
header-drawer {
justify-self: start;
margin-left: -1.2rem;
}
{%- if section.settings.sticky_header_type == 'reduce-logo-size' -%}
.scrolled-past-header .header__heading-logo-wrapper {
width: 75%;
}
{%- endif -%}
{%- if section.settings.menu_type_desktop != "drawer" -%}
@media screen and (min-width: 990px) {
header-drawer {
display: none;
}
}
{%- endif -%}
.menu-drawer-container {
display: flex;
}
.list-menu {
list-style: none;
padding: 0;
margin: 0;
}
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
}
summary.list-menu__item {
padding-right: 2.7rem;
}
.list-menu__item {
display: flex;
align-items: center;
line-height: calc(1 + 0.3 / var(--font-body-scale));
}
.list-menu__item--link {
text-decoration: none;
padding-bottom: 1rem;
padding-top: 1rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
}
@media screen and (min-width: 750px) {
.list-menu__item--link {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
</style>
base.css
.header__heading-link:hover .h2 {
color: rgb(var(--color-foreground));
}
.header__heading-link .h2 {
line-height: 1;
color: rgba(var(--color-foreground), 0.75);
}
.header__heading-logo {
height: auto;
max-width: 100%;
}
.header__heading-logo {
transition: filter 0.3s ease;
}
.header-wrapper:hover .header__heading-logo {
filter: invert(100%) grayscale(100%);
}
.header__heading-logo-wrapper {
width: 100%;
display: inline-block;
transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}
