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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Style First Nav Menu Item Using CSS

You can use CSS to style the 1st nav menu item in any theme using :

  • first-child
  • nth-child(1)
  • first-of-type

All 3 CSS rules enable you to style the 1st nav menu link for the primary navigation in Genesis powered child themes.

The first rule uses the first-child selector class like this :

.nav-primary .genesis-nav-menu > li:first-child > a {
    color: red;
}

You could also use nth-child like this :

.nav-primary .genesis-nav-menu > li:nth-child(1) > a {
    color: red;
}

Or use first-of-type like this :

.nav-primary .genesis-nav-menu > li:first-of-type > a {
    color: red;
}

All 3 pseudo-classes enable you to use CSS to target the first element among a group of child elements. In this case, the 1st element of a list of nav menu items.

In WordPress, you could also add a custom class to the 1st menu item and use that class as your selector in a CSS rule in your child themes style sheet.

Related Solutions

  • Changing The Primary Navigation Colors In StudioPress Themes

Nav Menu

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags