How can I change the background color of the side bar menu?

Sure! Do you mind posting a link to your site? Do you want the entire sidebar to have a background or just the menu?

Hannah

Hi Hannah,
thanks for your response.

I want just the menu to have a background. Here’s an exemple of how I woild like to have in my sidebar menu: https://postimg.org/image/6xew1zsrf/
It’s from this website: sab.org.br

If possible, I would like to know too, how can I make round corners in these background boxes, like the one in the picture?

My website is not online yet, but if it is really important I can make it online for you.

Thanks you so much!

If you could make your site live, then that will definitely help with writing the correct CSS for your site.

Thanks!,
Kevin

Thanks Kevin!

Now it’s online, but now I figured out that and I have other doubts.Now I would like to know the following:
1.How to change the body text font color
2. How to change the mouse hover box color
3. How to change the mouse hover body text

Thank you so much!

1.

#sidebar .module ul.menu li a {
    color: #c2151c;
}

2 & 3.

#sidebar .module ul.menu li a:hover {
    background-color: #333;
    color: #fff
}

Hannah

Thank you for your support Hannah!

Unfortunetely, it didn’t work. I was wondering if it’s because the code is referring to <!–#nav_menu-4–!> instead of <!–#sidebar–!>, but I tried to adapt the code you sent me by the following:

#nav_menu-4 .module ul.menu li a {
color: #c2151c;
}

#nav_menu-4 .module ul.menu li a:hover {
background-color: #333;
color: #fff
}

and it didn’t work eighter.
Do you wonder why?

Thanks again!

Oh, I didn’t realize you meant your primary menu. Try this:
1.

#nav li a {
    color: #000;
}

2.

#nav li a:hover {
    color: #fff;
}

3.

#nav li:hover {
    background-color: #333
}

Hannah

It did work Hannah.

Thank you so much!

I was actually trying to do the same thing, but with the “Store Menu” in my sidebar. My website is https://happybodykitchen.com/store-non-toxic-products/

I am wanting the Store Menu to look more like this menu: https://thehumanexperimentmovie.com/switch-to-safer/

Can anyone help me with CSS code that can do this? Also, the background-color I want is #0e88ce with the text white.

Here is what I have tried:

#sidebar .widget_nav_menu a {
background-color: #0e88ce;
color: #ffffff
}

This somewhat worked, as it changed the color up until the end of each word in the menu list, but I can’t seem to figure out how to change the color of the entire widget container. Please tell me what I am doing wrong. Thank you!

• This reply was modified 8 years, 4 months ago by sommerchaka. Reason: typo
• This reply was modified 8 years, 4 months ago by sommerchaka.

Hey Sommerchaka,

In the future, please start new topics with support questions. This will get you the fastest and best answers. Thanks!

Try this CSS out and let me know if it works or you:

.menu-amazon-product-menu-container {
    background: #0e88ce;
}

Be sure that you’re placing custom CSS into Theme Options> Advanced Settings.

-Kevin

That worked great – thank you!