Docs

[envatonetrust]

Hi! I want to change the color of the sidebar menu on my website to light blue and also the text color of careers which is present on the sidebar.

This is my site:
http://www.netrust.com.ph/main/

[Christopher]

Hi there

Please add this CSS under Custom > CSS in the Customizer.

.x-sidebar #menu-side-menu li a {
  color: #41a6ff;
}

Hope it helps.

[envatonetrust]

thanks for the code but it only changes the font color of the text “careers” Is it possible to also change the color of the menu, like the top nav bar menu?

[Christopher]

Yes ,You can.
Add this one:

.x-sidebar li a{
color: #41a6ff !important;
}

Thank you.

[envatonetrust]

it don’t take effect, it also change the text color. I want to fill the color of the nav side menu not just a transparent one.

[Christian]

Hey there,

Sorry for the confusion. Please add background property to your CSS

.x-sidebar #menu-side-menu li a {
color: #000000;
background: skyblue;
}

We can enable transparency by using rgba color value however, your page’s background is white therefore using rgba will be of no use because the background is a solid color. If we use a transparent background, it will mix with the color of your page’s background.

Hope that helps. 🙂

[envatonetrust]

Oh! thank you so much for this code, You are such a great help. Can you also include to the change color to blue when my mouse hover on the careers. The default color is black but when i point my mouse on the sidebar text, it changes the color to blue.

[Christian]

The code for that would be

.x-sidebar #menu-side-menu li a {
color: blue;
background: orange;
}

For more colors, please see http://www.quackit.com/css/css_color_codes.cfm

Thanks.

[envatonetrust]

I apply those codes, but still it does not change the hover over color of “careers” text on the sidebar

[Paul R]

Hi,

Sorry for the confusion.

Can you please try the code below.

.x-sidebar #menu-side-menu li a:hover {
    color:#000; /* text color on hover */
    background: red;  /* background color on hover - remove if not needed */
}

Please change the values(#000 & red) with the color you want.

Thank you.

[envatonetrust]

oh.. great! this is what I want. Thanks a lot! ^_^

[Paul R]

You’re most welcome.

[envatonetrust]

can you also give me the css code on the top nav menu, that when I hover over to any menu or sub menu it also changes the color to skyblue like the code above that you gave me?

[Cousett]

Your code above with a new selector should help you out.

.x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover {
    color:#000; /* text color on hover */
    background: red;  /* background color on hover - remove if not needed */
}

[envatonetrust]

Oh thanks… That code really helped me a lot.

[Author]

Posts