Written by on

How to Automatically Add Sub Menu Indicators for Menu Items

In this article I put together instructions on how to automatically add vertical and horizontal sub menu indicators for menu items in iThemes Builder‘s navigation module.

auto-submenu-indicators

Prerequisite: Navigation Module should be set to show a custom menu vs Builder Settings Categories or Builder Settings Pages.

1) Add the following at end of functions.php before closing PHP tag (if present):

function add_menu_parent_class( $items ) {

	$parents = array();
	foreach ( $items as $item ) {
		if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
			$parents[] = $item->menu_item_parent;
		}
	}

	foreach ( $items as $item ) {
		if ( in_array( $item->ID, $parents ) ) {
			$item->classes[] = 'has-children';
		}
	}

	return $items;
}
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );

The above code adds has-children class to menu items that have children.

2) Download this (mirror) zip file, extract it and upload fonts folder to active child theme directory.

3) Edit child theme’s style.css (WP dashboard -> Appearance -> Editor):

Near the top (above the comment block that’s above the html element’s CSS) add

@font-face {
  font-family: 'entypo';
  src: url('fonts/entypo.eot?40834763');
  src: url('fonts/entypo.eot?40834763#iefix') format('embedded-opentype'),
       url('fonts/entypo.woff?40834763') format('woff'),
       url('fonts/entypo.ttf?40834763') format('truetype'),
       url('fonts/entypo.svg?40834763#entypo') format('svg');
  font-weight: normal;
  font-style: normal;
}

and the following at the very end:

.builder-module-navigation .menu > li.has-children > a:after {
	content: "\e760";
	font-family: 'entypo';
	padding-left: 0.5em;
	speak: none;
}

ul.sub-menu li.has-children > a:after {
	content: "\e762";
	font-family: 'entypo';
	padding-left: 1em;
	speak: none;
}

Source via this.

Comments

  1. It’s now work for me :(

    Work for me this:

    #navwrap li a:not(:last-child):after {
    content: “\e760″;
    font-family: ‘entypo';
    padding-left: 0.5em;
    speak: none;
    }

    #navwrap ul ul li a:not(:last-child):after {
    content:’\e762′;
    font-family: ‘entypo';
    position: absolute;
    right:20px;
    speak: none;
    }

    Note: #navwrap is your menu id.

  2. The arrows work absolutely fine. Thank you very much for that.
    I had to make the menu larger 200px in all. Because of that the secondary dropdown now overlaps with the first. How do i move the secondary dropdown in relation to the first.

Respond

×

Ends Today! Save 35% off BackupBuddy with coupon code BACKUPWP35