Displaying titles

Hi author, many thanks for your help. I’m not sure I’m understanding correctly:

1. Do I copy menu_image_nav_menu_item_filter function to the functions.php file in the theme?

2. Where do I find walker_nav_menu_start_el?

3. I can’t find that element in my style.css.

Thanks for your time…

Many thanks! Will try this on Monday 🙂

It’s the weekend man! 🙂

It’s Friday, but night time where I am so I’m already on my second glass of wine 😉 I’m on the wrong computer as well at the moment and can’t remote in.

Hi zviryatko,

OK so I’ve tried the above, but it doesn’t appear to be working. I’ve probably missed something somewhere.
I can’t find the element .visible-in-small-resolution in my style.css or anything similar.

This is the function I’ve ended up with in my functions.php”

function menu_image_nav_menu_item_filter( $item_output, $item, $depth, $args ) {
		$attributes = !empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) . '"' : '';
		$attributes .= !empty( $item->target ) ? ' target="' . esc_attr( $item->target ) . '"' : '';
		$attributes .= !empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) . '"' : '';
		$attributes .= !empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';
		//added below line to display menu title on hover
		add_filter( 'walker_nav_menu_start_el', array( $this, 'menu_image_nav_menu_item_filter' ), 10, 4 );
		$image_size = $item->image_size ? $item->image_size : apply_filters( 'menu_image_default_size', 'menu-36x36' );
		$position   = $item->title_position ? $item->title_position : apply_filters( 'menu_image_default_title_position', 'after' );
		$class      = "menu-image-title-{$position}";
		$this->setUsedAttachments($image_size, $item->thumbnail_id);
		if ( $item->thumbnail_hover_id ) {
			$this->setUsedAttachments($image_size, $item->thumbnail_hover_id);
			$hover_image_src = wp_get_attachment_image_src( $item->thumbnail_hover_id, $image_size );
			$margin_size = $hover_image_src[1];
			$image = "<span class='menu-image-hover-wrapper'>";
			$image .= wp_get_attachment_image( $item->thumbnail_id, $image_size, false, "class=menu-image {$class}" );
			$image .= wp_get_attachment_image( $item->thumbnail_hover_id, $image_size, false, array(
				'class' => "hovered-image {$class}",
				'style' => "margin-left: -{$margin_size}px;",
			));
			$image .= '</span>';;
			$class .= ' menu-image-hovered';
		} else {
			$image = wp_get_attachment_image( $item->thumbnail_id, $image_size, false, "class=menu-image {$class}" );
			$class .= ' menu-image-not-hovered';
		}

		$item_output = "{$args->before}<a{$attributes} class='{$class}'>";
		$link        = $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		switch ( $position ) {
			case 'hide':
				//$item_output .= $image; //replace with line below to display menu title on hover
				$item_output .= '<span class="visible-in-small-resolution">' . $link . '</span>' . $image;
				break;
			case 'before':
				$item_output .= $link . $image;
				break;
			case 'after':
			default:
				$item_output .= $image . $link;
				break;
		}
		$item_output .= "</a>{$args->after}";

		return $item_output;
	}

Thanks again for your time.

Ended up getting this to work via CSS:

#prime_nav li a span:last-child {
	display:none;
}
#prime_nav li:hover a span:last-child,
#prime_nav li.current-menu-item a span:last-child
{
	display:block;
}

🙂

Thanks.