This is a beginners guide to changing the colors for the primary navigation of the Genesis Sample child theme.
It should give you a good idea about how to change colors for StudioPress & SP Community child themes built on Genesis as well.
Here’s 6 CSS code snippets you can modify for use in your own theme.
Background color
.nav-primary {
background-color: red;
}
Font color
.nav-primary a {
color: yellow;
}
Font size
.menu-primary a {
font-size: 30px;
}Font & Background Hover Color
.nav-primary a:hover {
color: yellow;
background-color: orange;
}
Current Menu Item Font & Background Color
.nav-primary .current-menu-item > a {
color: blue;
background-color: white;
}
Sub Menu Background & Font Color
.nav-primary .sub-menu a {
background-color: green;
color: white;
}
Sub Menu Hover Color
.nav-primary .sub-menu a:hover {
background-color: pink;
color: yellow!important;
}
Note: You can simply copy & paste any of these code snippets to the end of your child themes style.css file and modify them to suit your own styling preferences.
Here’s 5 color tools, some of which give you both the color names and hex color codes you can use in your CSS code.
I hope that helps you customize your primary nav menu in Genesis & should also give you a good idea of how to customize your secondary menu as well.
I could not get this to work by simply placing it at the bottom of my child.css page….any idea as to why that wouldn’t confirm these changes?
Thanks!
Hello Britney.
Try changing the default CSS instead if it doesn’t work.
The code only works for the primary nav menu and the screenshots are the result of the exact code i used when i took them.
There’s at least 20+ reasons code doesn’t work even when it does. Could be caching plugins, server side caching, browser caching, the list is long.
Otherwise, you can add !important after each value like this: