How to change transparent header to solid on dropdown menu hover?

[RebekkaBavnild]

How can I make my transparent header on the front page (with white text) change to my solid #FCFBF9 header with #333333 dark text (like it does when you scroll or on my other pages) when someone hovers over my “SHOP” dropdown menu?

I have tried endless codes now in base.css and liquid.header and nothing changes.

https://karliekarlo.com/

[RebekkaBavnild]

Hi! I don’t use whatsapp, are you able to help me in here?

[BiDeal-Discount]

Hi @RebekkaBavnild

Let try to add custom CSS below to your base.css file then see the result:

.shopify-section-group-header-group.section-header .header-wrapper.gradient {
  background: #fcfbf9 !important;
}

.shopify-section-group-header-group.section-header .header-wrapper.gradient .header * {
  color: #000 !important;
}

[RebekkaBavnild]

Hi! Unfortunately, nothing changed. I have tried a similar code before. Anything else I can try?

[BiDeal-Discount]

did you add code to your css? I don’t see it on storefront. I believe it will working correct as you want for sure

[RebekkaBavnild]

I added it but deleted it again as it didn’t work. I’ve added it again.

[BiDeal-Discount]

as I see on your screenshot. you are missing a } character for close @keyframes

[RebekkaBavnild]

Added the missing } but it’s still not working /:


[BiDeal-Discount]

Still missing character {

Let try to replace by this:

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

.shopify-section-group-header-group.section-header .header-wrapper.gradient {
  background: #fcfbf9 !important;
}

.shopify-section-group-header-group.section-header .header-wrapper.gradient .header * {
  color: #000 !important;
}

[RebekkaBavnild]

Oh, whoops! I see. I replaced the code but it just changed my transparent header with white text to the solid header with black text I DO want that, but only when the mouse is hovering over the “SHOP” dropdown menu.

(I removed the code again).

[BiDeal-Discount]

That sounds great

Please let me know if you need help me.

If my answer helpful, don’t forget to like & accept it as solution.

Thank you!

[RebekkaBavnild]

It didn’t work, I still need help I only want the header to change to the solid version when the mouse is hovering over the “SHOP” dropdown menu. I still want to keep the transparent header with white text when the mouse is not hovering over SHOP.

[RebekkaBavnild]

Do you have another code I can try to make this work? Thank you!

[BiDeal-Discount]

oh sorry my mistaken.

Let try to replace by this code:

.shopify-section-group-header-group.section-header .header-wrapper.gradient .header li > a.list-menu__item {
  color: #333333 !important;
}

[RebekkaBavnild]

No worries. I tried it out, it didn’t do anything. It seems stuck no matter what code I put in.

[BiDeal-Discount]

Let replace your current section code by this:

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

.shopify-section-group-header-group.section-header .header-wrapper.gradient .header li > a.list-menu__item {
  color: #333333 !important;
}

[RebekkaBavnild]

The code did this: Almost there .. just need the menu text to turn #333333 as well (and I don’t know what’s happening in the corners?)

[BiDeal-Discount]

Please remove your code:

header.shop-hover,
header.shop-hover * {
  background-color: #fcfbf9 !important;
  color: #333333 !important;
}

[RebekkaBavnild]

I’ve removed it.

[BiDeal-Discount]

is it working now?