Menu Font and Background color

[Lindsay]

I have 2 menus on my website. I am happy with the top menu but would like to change the bottom:
- I want to change the text color of the bottom menu from black to white, and for it to remain white when hovering.
- I also want to make the background (green) color to change to a lighter green when hovering over it.

I have tried firebug and still can't figure out how to change these two things.

Thank you!

http://www.lindsayrusk.ca

[sangfroidweb]

Hi there! Here is the CSS to accomplish it. This changes the colors on the menu items in the .menu-primary (which is where the second menu is). You can adjust the hex code of the lighter green to be the color you prefer...I just picked a color. 🙂

.genesis-nav-menu.menu-primary a {
color: #fff;
}

.genesis-nav-menu.menu-primary a:hover {
background-color: #3c8622;
color: #fff;
}

Hope this helps! Let me know if not, and we can help you get sorted out.
Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Lindsay]

Hi Liz,

Thank you for your help, but I still cannot figure it out. My css doesn't have any "menu-primary" text. When I change the color code here:

.genesis-nav-menu a {
color: #333;
display: block;
padding: 32px 20px;
text-decoration: none;

it changes the text color of both menus. I cannot figure out how to distinguish between both menus.

Thank you!
Lindsay

[sangfroidweb]

Hi there!
Sorry, I should have been more clear...you will need to add this CSS to the stylesheet. There isn't currently any CSS that addresses the .menu-primary, so we are just going to add it. Try adding this to the stylesheet right underneath the other CSS for the menu (around line 1160).

.genesis-nav-menu.menu-primary a {
color: #fff;
}

.genesis-nav-menu.menu-primary a:hover {
background-color: #3c8622;
color: #fff;
}

Let me know how it goes!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Lindsay]

It worked!!! Thank you so much for your help!!!

[pcbguy007]

I am having problems changing the font size of my main menu (.genesis-nav-menu) / (.genesis-nav-menu .menu-item).

I am editing the CSS file directly, but no matter what I attempt to update the font size to (either by specifying a set pixel size, or an em measurement, there's no change.

If I enter a font size very large, then the font remains the same size, but the nav gets pushed lower down the page.

Please can you help? Thank you!
URL: http://www.racecitypcb.com

[sangfroidweb]

Hi! The font size for the menu item is being governed by ".genesis-nav-menu a" on line 2717 of the stylesheet. To change the font size, you will need to modify the font size specified there on line 2717. Here is the css from that line where the font size is set to 12px/1.2rem...

.genesis-nav-menu a {
border-bottom-width: 0;
color: #232525;
display: block;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.5px;
padding: 10px;
text-transform: uppercase;
}

You'll notice there are 2 lines that specify the font-size. Be sure to change both lines that reference the font size. So, as an example, if you wanted it to be 14px, change both of those lines respectively to:

font-size: 14px;
font-size: 1.4rem;

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Author]

Posts