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.
Was This Tutorial Helpful?