Displaying titles

Copy menu_image_nav_menu_item_filter function from plugin to your theme, add it filter walker_nav_menu_start_el like in plugin, and replace line 280 to something like
$item_output .= '<span class="visible-in-small-resolution">' . $link . '</span>' . $image;
and in style.css hide element .visible-in-small-resolution for all except low resolution media query.

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…

1 – yes,
2 – https://github.com/zviryatko/menu-image/blob/master/menu-image.php#L63
3 – in copied code change this line https://github.com/zviryatko/menu-image/blob/master/menu-image.php#L280 to what i wrote in previous comment.

Many thanks! Will try this on Monday ??

Why not today?)

It’s the weekend man! ??

I thought today is friday..
don’t be afraid, just try it, i can help)

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.

oh, ok, you convinced me ??

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.

Hi, maybe you forgot about add_filter?
add_filter( 'walker_nav_menu_start_el', 'menu_image_nav_menu_item_filter', 11, 4 );

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

??

Hi, yes, it what you need ??

Thanks.