• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Add Drop Down Indicators to Genesis Nav Menu

Add Drop Down Indicators to Genesis Nav Menu

By Victor M. Font Jr.
June 28, 201512 Comments

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.

  • 1share
  • Facebook0
  • Twitter1
  • Pinterest0
  • LinkedIn0
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply to Victor M. Font Jr. Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Bob Connelly

    March 31, 2020 at 4:26 pm

    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.

    Reply
  2. Dean

    April 26, 2017 at 5:54 am

    Thank you! Very helpful

    Reply
  3. Kimberly

    April 6, 2017 at 3:16 pm

    Victor

    I am seeing a small box in place of the icon. Any idea why this is happening? Thanks

    Reply
    • Victor M. Font Jr.

      April 6, 2017 at 3:25 pm

      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.

      Reply
  4. Kimberly

    April 6, 2017 at 3:15 pm

    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

    Reply
  5. Caroline Janice

    December 18, 2016 at 6:45 am

    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..

    Reply
    • Victor M. Font Jr.

      December 18, 2016 at 7:09 am

      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.

      Reply
  6. Mark Fayard

    November 2, 2016 at 11:07 am

    Hey Victor, it’s Mark from Codeable! Small world. You drop down css was just what I was looking for. Thank you!

    Reply
    • Victor M. Font Jr.

      November 3, 2016 at 10:18 am

      Hi Mark. Nice hearing from you! Hope things are well with you and yours. Glad you found the code useful.

      Reply
  7. Matt Orley

    August 24, 2016 at 4:31 pm

    Clear Answer Copy Paste and Done

    Reply
  8. Dom

    January 7, 2016 at 6:15 am

    Hi there

    Thanks for this. Been driving me mad for a good 30 minutes.

    Dom

    Reply
  9. Robert

    January 4, 2016 at 9:39 pm

    Worked liked a charm. Thanks.

    Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....