Drop Down Menu Color Change- Trade Theme

Solved

Drop Down Menu Color Change- Trade Theme

notsogood1
Tourist
13 0 1

Hi! I'm using the Trade theme and was wondering if it would be possible to change the menu color (dropdown menu). I'd love for it to be white with black text until it's hovered over and then change the background to black with white text for what is being hovered over. I'm not sure if it's possible or if it even makes sense.

 

Any help is appreciated! Thank you!

 

notsogood1_0-1720269543330.png

 

Accepted Solution (1)
BSSCommerce-TC
Shopify Partner
215 46 49

This is an accepted solution.

Hi @notsogood1  , 

You just need to add the !important property to make sure this code is always applied. It like this

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-100%) scaleX(0);
  }
  40% {
    transform: translateX(50%) scaleX(1);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

.menu-drawer__menu-item--active {
    color: black !important;
    background-color: white !important;
}

.menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    color: white !important;
    background-color: black !important;
}

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 11 (11)

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @notsogood1  ,

 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
notsogood1
Tourist
13 0 1

Hi, my apologies. Here you go:

 

f43113-ef.myshopify.com

 

pass: eantia

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @notsogood1 ,

You can follow these steps

Step 1: Navigate to Online Store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

.menu-drawer__menu-item--active {
    color: black;
    background-color: white;
}

.menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    color: white;
    background-color: black;
}

 

It would be like this

BSSCommerceTC_0-1720273088615.png

 

It doesnt work, let us know that and we happy to giving a new solution for you.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
notsogood1
Tourist
13 0 1

Thank you. I must be doing something wrong because I've entered this (as well as the other codes given to me on this thread) and it's not working. Here is a screenshot.

Screenshot 2024-07-06 074109.png

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @notsogood1 ,

Some thing wrong on your file. Please replace the code below from line 3558.

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-100%) scaleX(0);
  }
  40% {
    transform: translateX(50%) scaleX(1);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

.menu-drawer__menu-item--active {
    color: black;
    background-color: white;
}

.menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    color: white;
    background-color: black;
}

 

Hope it can help you.

If our suggestion is useful, please let us know by giving a like or mark as solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
notsogood1
Tourist
13 0 1

Replaced that but still no luck. I haven't messed with anything else within the code so I'm unsure as to why it's not working. I don't want you to spend too much time on this but thank you for your suggestions! I appreciate it.

BSSCommerce-TC
Shopify Partner
215 46 49

This is an accepted solution.

Hi @notsogood1  , 

You just need to add the !important property to make sure this code is always applied. It like this

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-100%) scaleX(0);
  }
  40% {
    transform: translateX(50%) scaleX(1);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

.menu-drawer__menu-item--active {
    color: black !important;
    background-color: white !important;
}

.menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
    color: white !important;
    background-color: black !important;
}

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
notsogood1
Tourist
13 0 1

That worked! Thank you so much!

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @notsogood1 ,

We're happy to see that our suggestion helped you solve the issue. Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

 

We would really appreciate it if you could mark the previous solutions. It could be helpful for other merchants as well. Have a nice day 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Eddie_specialst
Shopify Partner
34 1 3

Hello @notsogood1 
as seen on the screenshot

Eddie_specialst_0-1720272082216.png

 

Eddie_specialist

Emily_19
Shopify Partner
1 0 0

Hello @notsogood1 ,

 

Edit code > Find base.css file > Given code add the bottom.

 

If you want to change complete menu background color, use this code.

Screenshot 2024-07-06 062612.png

 

list-menu {
    
    background: yellow;
}

 

 If you want to change the drawer color, use this code.

 

Screenshot 2024-07-06 062459.png

 

.menu-drawer__navigation {
    
     background: pink; 
}

.menu-drawer__close-button {
background: pink;
}

 

 

Save changes!