CSS to change menu text color

livingwhearingloss · Member · May 2, 2016 at 7:59 pm
Copy link

Add topic to favorites
Hi there! I upgraded my site to premium and am now trying to take advantage of the customization features. I was able to set my background color to one of the colors in my new logo, but I want it to be a solid color and it is transparent. I also wanted to change the menu color text to the other color in the logo. I have been trying to do this through CSS, but it is very complicated. Can you help with this? Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 3, 2016 at 3:10 am
Copy link
Hi, for the menu background color, add the following CSS, which sets the alpha transparency to 1 (fully opaque).
```
.main-navigation {
    background-color: rgba(45, 96, 172, 1) !important;
}
```
For the font color, give this a try. Given it is near the value of the blue background, I would recommend setting it to bold and making the font just a bit larger since it is lower contrast with the blue background.
```
.main-navigation a {
    color: #49c3cf;
    font-weight: bold;
    font-size: 110%;
}
```
hotoffthemat · Member · May 3, 2016 at 9:10 pm
Copy link
Thank you very much for this! The menu code worked perfectly, but the font color is still white — albeit bolder and bigger. When I preview it in CSS it alternates colors — the first one is blue, the second white, and so on, but on the page it appears all white.

Can you help with that? Thank you!
livingwhearingloss · Member · May 3, 2016 at 9:11 pm
Copy link
Sorry – should have replied from the right account. The blog I need help with is livingwithhearingloss.com. Thank you!
thesacredpath · Member · May 3, 2016 at 10:40 pm
Copy link
Hi there, I looked at your site in Chrome, Safari and Firefox, and on all of them, I see the menu items in the turquoise color, except for the “home” which is in white. That is the page I’m on and the theme has a CSS rule that makes the current page menu item a different color to help visitors know where they are on your site. If you wish to edit the color of the current page item, add this and edit as desired.
```
.main-navigation .current_page_item a {
    color: #ffee00;
}
```
```
.main-navigation li:hover a {
    background: #00ff6e;
}
```

No items found.