If you are a Genesis Framework user, I’m sure that you are already aware that they included a responsive mobile menu in their last push about a month ago. The issue is that on the desktop version of the site there is no indicator that a top level menu item has a sub-menu. This is a UI no-no as the user wouldn’t actually know that there were more pages below. So we need to add an icon after the menu item to alert them that it is indeed a dropdown menu. So we are going to use Font Awesome to add the icon and we will need to add some css to make it work. I found a few tutorials out there that use the built in WordPress “classes” functionality for menu items which is a great way to go about it but I decided to go a different route to have more control over the css and it actually is much less code.
First thing you have to do of course it enqueue the Font Awesome stylesheet. That’s a pretty simple addition to the functions.php file:
Next, you will need to decide which icon you want to use from the Font Awesome library. This should be the easiest part but if you are like me you obsess over every little detail of a site build. Should you use the single arrow down or a double arrow down? In a circle or not? Ugh…so many amazing icons on FA. I chose the chevron down which seems to be pretty standard. You will need to get the unicode which happens to be ‘/f078’.
Armed with that info you can move on to the actual CSS stuff that will get this thing to appear on the page using the :after pseudo-element. Below is the CSS you will need to include in your child theme style.css file:
You are going to want to play around with the font-size and maybe the margin to get it just right. Have fun!