Add Drop Down Indicators to Genesis Nav Menu

Did you happen to notice the drop down indicators on the main menu above? Those drop down indicators are created simply by adding the following to your style.css:

.genesis-nav-menu > .menu-item-has-children > a:after {
	content: "\f140";
	font: normal 16px/1 'dashicons';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	padding-left: 3px;
	vertical-align: top;
}

The css takes advantage of WordPress’s built-in dashicons. If you want a drop down indicator that looks different from what this site uses, you could change the content line to content: “\f347″; for an alternate down arrow () or a standard down arrow () with content: “\f346″;.

If you want to include drop down indicators on sub-menus, add .genesis-nav-menu .sub-menu > .menu-item-has-children > a:after to your block title. You’ll still have to fiddle with menu item spacing and menu width, but I’ll leave that to you.