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.
Thank you. Very useful. I needed to change my menu items (.menu-item span) from “block” to “inline-block” to keep the indicator from wrapping. Other than that, the css you provide is exactly what I was looking for. Thanks again.
Thank you! Very helpful
Victor
I am seeing a small box in place of the icon. Any idea why this is happening? Thanks
It usually means that dashicons isn’t loading. In fact, I just viewed your site and can confirm that dashicons isn’t loading. You would have to edit the News Pro functions.php and add dashicons to the area that loads the scripts.
Hey Victor
Dropped the code into my css file and I and getting a small box in place of the actual icon. It has f140 inside the box. Any idea on how I can fix this. Thanks
I need help..Because im new in WP,. can you please check my website healthcertified2k.com, . when i view my website in mobile,. my menu is not responsive,. i want to have a Drop menu when i view in mobile..Please help me..Thank you and Advance..
Caroline,
It’s not possible to help while you have autoptimize activated. Minifying and concatenating scripts makes them too difficult to read. I can tell you that you have bad HTML in the file header section. I can see this when I view the source in Firefox. This could also be related to autoptimize, but it’s not possible to know with that plugin enabled.
Hey Victor, it’s Mark from Codeable! Small world. You drop down css was just what I was looking for. Thank you!
Hi Mark. Nice hearing from you! Hope things are well with you and yours. Glad you found the code useful.
Clear Answer Copy Paste and Done
Hi there
Thanks for this. Been driving me mad for a good 30 minutes.
Dom
Worked liked a charm. Thanks.