• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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;
}

change background color

Font color

.nav-primary a {
    color: yellow;
}

change font color

Font size

.menu-primary a {
    font-size: 30px;
}

Font & Background Hover Color

.nav-primary a:hover {
    color: yellow;
    background-color: orange;
}

current menu item

Current Menu Item Font & Background Color

.nav-primary .current-menu-item > a  {
    color: blue;
    background-color: white;
}

hover color

Sub Menu Background & Font Color

.nav-primary .sub-menu a {
       background-color: green;
       color: white;
}

sub menu

Sub Menu Hover Color

.nav-primary .sub-menu a:hover {
       background-color: pink;
       color: yellow!important;
}

sub-nav-menu-hover

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

Reader Interactions

Comments

  1. Britney says

    November 19, 2013 at 6:13 pm

    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!

    Log in to Reply
    • Brad Dalton says

      November 19, 2013 at 6:26 pm

      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:

      color: red!important;
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems