Changing The Primary Navigation Colors In StudioPress Themes

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.

More Tips To Customize Your Nav Menu

• Changing The Color Of Each Nav Menu Item