Color of a link stop working in another page

Store Design
1

Hello guys,

I hope you’re doing well,

I need your help, the color of the ‘Hot Deal’ link in the menu is not white anymore once we click on it

(On this page it looses it color : https://giftygems.com/collections/all)

Here’s the code I wrote :

.header__active-menu-item:hover {
color: #da6263;
}
.header__menu-item:hover {
color: #da6263;
}
.header__menu-item {
font-size: 15px !important;
font-family: Poppins, sans-serif;
}
.header__active-menu-item {
text-decoration: none;
color: #6d6d70;
}
#HeaderMenu-hot-deal {
color: white !important;
background-color: #ff4747;
border-radius: 100%;
}
#HeaderMenu-hot-deal:hover {
color: white !important;
background-color: #1687af;
}

It does work on the other pages but it only stop working in that link, normally it should override everything since I called it by ID and added the !important,

Here’s my website : https://giftygems.com

Thank you in advance guys,

Kind regards.

2

@giftygems - you have a file named all.css , you have following code in it , please remove it and check

#shopify-section-sections--20895049351458__header .header__active-menu-item {
    text-decoration: none;
    color: #6d6d70;
}
3
  1. Go to online store
  2. Edit Code
  3. Open your all.css file
  4. Find the following code: “You can use the search for this number 20895049351458”
    #shopify-section-sections–20895049351458__header .header__active-menu-item {text-decoration:none; color: #6d6d70}
  5. Replace the color with: #ffffff
  6. Save.

Let me know if it work by marking it as a solution.