Header Menu Color Issues ( Dawn Theme )

Store Design
, , , , , , ,
1

Hello Everyone!

I have added hover to the header menu but when I hover over the shop menu the text color is not visible. When I hover over the shop menu the text color should be white. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

Screenshot 2025-03-25 112243.png
Screenshot 2025-03-25 112243.png1150Ă—159 20.8 KB

1 Like
2

Thank you. Send me the code here.

3

Hey @dreamtechzone_5 ,

It looks like the background color of the “SHOP” menu item changes on hover, but the text color remains the same, making it hard to see. You need to explicitly set the text color to white when hovering. Try adding this CSS:

#HeaderMenu-shop:hover {
  background-color: #6f53d9; /* Adjust the background color if needed */
  color: white !important;
}

If the !important rule is required, it ensures the text color is applied correctly. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,
Rajat

1 Like
4

The code is not working. I don’t want to add hover to the “SHOP” menu. The background color of the “SHOP” menu will be # 7069BC and the text color will be white. The rest of the menu will have hover add.

I used the following code for the “SHOP” menu.

a#HeaderMenu-shop { background: #7069BC !important; color: white !important; border-radius: 4px !important; line-height: 4px !important; } #HeaderMenu-shop span { font-weight: 800 !important; } ul.list-menu.list-menu--inline { align-items: center !important; } a#HeaderMenu-shop .header__active-menu-item { color: #fff !important; }

I used below code to add hover to all “MENU”

nav.header__inline-menu .header__active-menu-item {
color:#7069BC7069BC !important;
}
nav.header__inline-menu ul li :hover {
color:#7069BC !important;
}

5

Hi @dreamtechzone_5

Please add this more code to solve the issue

nav.header__inline-menu ul li #HeaderMenu-shop :hover {
    color: #fff !important;
}
1 Like
6 
nav.header__inline-menu ul li a#HeaderMenu-shop:hover span {
    color: #fff !important;

}
nav.header__inline-menu ul li:nth-child(2):hover span {
    color: #fff;

}

Please add that CSS then let me know if it works

7

I’ve carefully reviewed the issue and implemented a refined solution that ensures the “SHOP” menu retains its dedicated background color (#7069BC) with white text at all times, while the rest of the menu items maintain a hover effect. The updated CSS ensures proper alignment, padding, and a consistent aesthetic across all menu items.

Here’s the updated implementation:

/* Style for the SHOP menu item */
a#HeaderMenu-shop {
  background: #7069BC !important;
  color: white !important;
  border-radius: 4px !important;
  padding: 8px 12px !important; /* Adjust padding for better spacing */
  display: inline-block; /* Ensures the background wraps properly */
}

/* Ensure the SHOP menu text stays bold */
#HeaderMenu-shop span {
  font-weight: 800 !important;
}

/* Fix active menu item color */
a#HeaderMenu-shop.header__active-menu-item {
  color: white !important;
}

/* Align menu items properly */
ul.list-menu.list-menu--inline {
  align-items: center !important;
}

/* Add hover effect to all other menu items */
nav.header__inline-menu ul li a:not(#HeaderMenu-shop):hover {
  color: #7069BC !important;
}

Try this out and let me know if you need any tweaks!

1 Like