• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials Dashicons, Navigation Menus

How to Add Arrow Indicators to Genesis Navigation Menus

November 4, 2014 Updated on May 28, 2019 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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.

dashicon arrow images

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.

navigation menu using dashicon arrow style 1
@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.

navigation menu using dashicon arrow style 2
@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.

navigation menu using dashicon arrow style 3
@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.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. ekant puri says

    Great post i want to add f345 for my website hope it works.

    Reply
    • Marcy Diaz says

      It should work well, ekant, if you follow the tutorial.

      Reply
  2. Tiffany says

    This tutorial allowed me to add my drop down arrow so quickly and easily. Thanks so much for sharing!

    Reply
    • Marcy Diaz says

      That’s great, Tiffany! Thanks for letting me know.

      Reply
  3. Naval Gupta says

    i want to add arrow to my sub items also. how to do this?

    Reply
    • Marcy Diaz says

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

      Reply
  4. Rob says

    Hey 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?

    Reply
    • Marcy Diaz says

      I’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;
      }

      Reply
  5. Rob says

    Thank you, worked out again :)

    Reply
  6. Sandra says

    How to change color on the arrow?

    Reply
    • Marcy Diaz says

      Thanks 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;
      }

      Reply
  7. Jodi says

    Thank you so much! This was so easy.

    Reply
    • Marcy Diaz says

      Thanks for the kind words, Jodi!

      Reply
  8. Shashank Bhattarai says

    Is there way to directly add through function.php ? I would like to add fa-caret-down using font awesome icons ?

    Reply
    • Marcy Diaz says

      You 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/

      Reply
      • Suraj Katwal says

        I solved my problem with FontAwesome 5,
        I added a code
        font-weight: 900;
        font-family: ‘Font Awesome 5 Free’;

        Reply
  9. Suraj Katwal says

    I did same using FontAwesome 5 but couldn’t loads any icons in my website.

    Reply
    • Marcy Diaz says

      You can use the help documents on the FontAwesome website to learn how to use FontAwesome.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!