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.