logo is going back to white when hovering the header while scrolling

masooma12
Shopify Partner
15 0 0

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

masooma12_5-1717236036794.png

when hovering it

masooma12_2-1717235867137.png

this is when im scrolling looking nice

masooma12_6-1717236084045.png

 

but as soon as i hovered the header in state of scrolling the logo goes white 

 

masooma12_4-1717235962895.png

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);
}

 

 

 

Replies 0 (0)