You can add arrow indicators to your navigation menu drop downs in your Genesis theme with just a little bit of CSS. This will help your website visitors to see at a glance which menu items have more items hidden below them.
I like to use Dashicons for this because they are already enqueued in many Genesis themes, and because there are three types of arrows that you can choose.
You can view all the dashicons here. The arrows are in the section labeled “Sorting”.
If your theme doesn’t have them enqueued, or if you need more step-by-step instructions for using them, see this earlier tutorial on using dashicons.
You can add the CSS section to your custom CSS editor or to your theme’s style.css just before the first @media section.
Change the Arrow Size
If you want to change the size of the arrow, this is the line to edit:
font: normal 16px/1 'dashicons';
Change the 16px to 18px for larger, or to 14px for smaller.
Arrow Style 1
This one uses “/f140” – see the text just below the dashicon – and creates a traditional-type drop down.
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}Arrow Style 2
This one uses “/f346”, and creates a real arrow.
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f346";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}Arrow Style 3
This one uses “/f347”, and creates a wider open arrow.
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f347";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}Which arrow style will you add to your Genesis theme navigation menu drop down?
ekant puri
February 17, 2015 at 12:13 amGreat post i want to add f345 for my website hope it works.
Marcy Diaz
February 17, 2015 at 8:44 amIt should work well, ekant, if you follow the tutorial.
Tiffany
August 3, 2015 at 2:53 pmThis tutorial allowed me to add my drop down arrow so quickly and easily. Thanks so much for sharing!
Marcy Diaz
August 3, 2015 at 3:24 pmThat’s great, Tiffany! Thanks for letting me know.
Naval Gupta
September 2, 2015 at 1:04 ami want to add arrow to my sub items also. how to do this?
Marcy Diaz
September 2, 2015 at 9:45 amYou would use CSS, like this:
.genesis-nav-menu .menu-item-has-children > a:after { content: "\f347"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px/1 'dashicons'; padding-left: 3px; vertical-align: top; }Notice that the > between .genesis-nav-menu and .menu-item-has-children has been removed.
Rob
September 16, 2015 at 8:34 amHey Marcy, thanks for the tutorial. I added the CSS code you provided:
.genesis-nav-menu > .menu-item-has-children > a:after {
content: “\f140”;
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 ‘dashicons’;
padding-left: 3px;
vertical-align: top;
}
and it worked great.
However, there’s one problem. Now, in my responsive menu on mobile, I have two dashicons. The icon that I added with your tutorial looks good on desktop, but it’s unnecessary in my mobile menu.
Here’s the code in Media Queries section:
.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: “\f140”;
float: right;
font: normal 16px/1 ‘dashicons’;
height: 16px;
padding: 18px 20px;
right: 0;
text-align: right;
z-index: 9999;
}
What should I do to solve this issue? How can I hide the icon that I added with your code in my mobile menu?
Marcy Diaz
September 16, 2015 at 8:55 amI’m glad it worked out for you, Rob.
To remove the icon you added for desktop, find the media query code you pasted in your comment.
Just above it, add this:
.genesis-nav-menu > .menu-item-has-children > a:after {content: "";
display: none;
}
Rob
September 16, 2015 at 2:45 pmThank you, worked out again :)
Sandra
January 5, 2016 at 3:21 amHow to change color on the arrow?
Marcy Diaz
January 5, 2016 at 9:23 amThanks for stopping by, Sandra!
You would change color of arrows by adding color to:
.genesis-nav-menu > .menu-item-has-children > a:after {color: #ff0000;
}
Jodi
March 25, 2016 at 5:00 pmThank you so much! This was so easy.
Marcy Diaz
March 25, 2016 at 5:07 pmThanks for the kind words, Jodi!
Shashank Bhattarai
December 6, 2016 at 6:18 pmIs there way to directly add through function.php ? I would like to add fa-caret-down using font awesome icons ?
Marcy Diaz
December 6, 2016 at 10:10 pmYou can enqueue the Font Awesome icons in your functions.php, and then copy the CSS below each icon to use in your stylesheet.There is more help here: http://fontawesome.bootstrapcheatsheets.com/
Suraj Katwal
June 6, 2018 at 9:29 pmI solved my problem with FontAwesome 5,
I added a code
font-weight: 900;
font-family: ‘Font Awesome 5 Free’;
Suraj Katwal
June 6, 2018 at 10:12 amI did same using FontAwesome 5 but couldn’t loads any icons in my website.
Marcy Diaz
June 6, 2018 at 12:56 pmYou can use the help documents on the FontAwesome website to learn how to use FontAwesome.