[ellen gParticipant]

Hi… I have changes the menu item background color, and made the font color for the menu items white. The drop down menu background didn’t get changed, and now you can’t see the menu item name. Is there a way to change the drop down menu background color? Thanks!

[KoryKeymaster]

Hey Ellen,

Thanks for writing in, we’ll be happy to assist you with this. 🙂

Could you please let us know which Stack you are using? Since each Stack functions like a unique theme, not all Stacks feature the same options. For example, with Renew, you can change the color of your navbar, which also updates the background color of the dropdowns, but this is not something you can do in Integrity or Icon.

Let us know when you have a chance.

Thanks!

[ellen gParticipant]

sorry… I’m using icon stack

[ellen gParticipant]

and I used this code to change the background color
.x-navbar {
background-color: #fafafa;
}
.x-navbar .x-nav > li > a {
background-color: #73c13c;
}

and it works great for teh main menu but the drop down needs to be changed also

[KoryKeymaster]

Yes, this is something you would need to do using some custom CSS either via the Custom section of the Customizer, or you style.css file in a child theme if you are using one. You can use the following snippet and customize to your needs:

.x-navbar .sub-menu {
  background-color: #fafafa;
}

Thanks!

[ellen gParticipant]

Thanks! It worked great!

[KoryKeymaster]

Glad to hear, Ellen! 🙂

[Lucas GParticipant]

Hello there!

I would like to know same thing- How to change the drop down menus background color – but in this case for the Renew stack. I’m working on taaonline.com and the dropdown are the same color as the background.

Also, how could I change the color of the hover background of this dropdown menus?

As always, Thanks for the great work!!

[RupokMember]

Hi @donlucas

Thanks for updating! I can see there is a conflicting code on your customizer that taking the submenu background off. Let’s remove it –

.x-navbar, .x-navbar .sub-menu {
  background-color: #ffffff !important;
}

If you have used to change the navbar background color, then just use –

.x-navbar  {
  background-color: #ffffff !important;
}

If you want to manipulate the submenu background color, then use it –

.desktop .sub-menu {
  background-color: #2c3e50;
}

Change the color values with your own.

I am not sure what you meant by color of the hover background of this dropdown menus. Could you please clarify a bit with a screenshot that what you are trying to accomplish?

Cheers!

[Lucas GParticipant]

That did it for me- Thank you for your help!

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[MaartjeParticipant]

ANd for stack Ethos? Also want to change background x-menu

[ChristopherModerator]

Hi there,

Please add this :

.x-nav{
background-color:red;
}

Hope it helps.

[FauziCCParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for writing in! If the previously provided CSS isn’t working for you, something may be conflicting. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Author]

Posts