Drop Down Menu Color Change- Trade Theme

[notsogood1]

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!

[BSSCommerce-TC]

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.

[notsogood1]

Hi, my apologies. Here you go:

f43113-ef.myshopify.com

pass: eantia

[BSSCommerce-TC]

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

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

[notsogood1]

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.

[BSSCommerce-TC]

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 😍

[notsogood1]

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

[notsogood1]

That worked! Thank you so much!

[BSSCommerce-TC]

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 😍

[Eddie_specialst]

Hello @notsogood1 
as seen on the screenshot

[Emily_19]

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.

list-menu {
    
    background: yellow;
}

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

.menu-drawer__navigation {
    
     background: pink; 
}

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

Save changes!