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. This tutorial works for all Genesis themes. If your theme already uses icons, you can change them for dashicons, if you like.
Dashicons are great for this because they are already enqueued in many Genesis themes, and because they are also used in the WordPress admin, and so it’s easy to add them to your theme. There are also three types of arrows that you can choose, so they can match most any theme style.
You can view all the dashicons here. The arrows are in the section labeled “Sorting”.
If your theme doesn’t have dashicons enqueued, or if you need more step-by-step instructions for using them, see this earlier tutorial on using dashicons. It explains how to add them to your theme.
You can add the CSS section to your Custom CSS (under Appearance > Customize > Custom CSS) or to your theme’s style.css.
If you add the CSS to your style.css, you want to be sure to add the icons to the desktop menu section of the theme. The desktop section is either in the main CSS section, before media queries or in a media query section that starts with @media only screen and (min-width: 1023px) {, if your theme is mobile-first. You may want to adjust the min-width number to match your theme. You may also want to remove the arrows for mobile screen sizes.
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.
To Remove the Drop Down Arrows
To remove the dropdown arrows, for each style below, add
@media only screen and (max-width: 1023px) {
.genesis-responsive-menu .genesis-nav-menu > .menu-item-has-children > a::after {
content: '';
}
}Arrow Style 1
This one uses “/f140” – and creates a traditional-type drop down style.
@media only screen and (min-width: 1023px) {
.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.
@media only screen and (min-width: 1023px) {
.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.
@media only screen and (min-width: 1023px) {
.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?
If you need help with your website menus, you can contact me for a small project.
Leave a Reply