WordPress.org

1. Gretchen Louise
   Member
   Posted 1 month ago #
   

   I have the Page Title Text appearing, but cannot get it to display on top of the image instead of just beside or below the image. I've tried negative top margins, etc. all to no avail. Thanks for your help!

   https://wordpress.org/plugins/nav-menu-images/

2. Milan Dinić
   Member
   Plugin Author
   Posted 1 month ago #
   

   You mean text over image? This is pure CSS hack, I used that somewhere but can't remember where right now. Will reply when I find.

   (Lovely design on you site, BTW)

3. Milan Dinić
   Member
   Plugin Author
   Posted 1 month ago #
   

   Here is one solution, you might want to try search for "text over image".

   /* Force our nav menu item filter */
   add_filter( 'nmi_filter_menu_item_content', '__return_false' );
   
   /**
    * Filter menu item text.
    */
   function md_menu_item_content( $content, $item_id ) {
   	if ( has_post_thumbnail( $item_id ) ) {
   
   		$content = get_the_post_thumbnail( $item_id, 'sidebar-thumb', array( 'alt' => trim( strip_tags( $content ) ), 'title' => trim( strip_tags( $content ) ) ) );
   
   		if ( $description = get_post_field( 'post_content', $item_id ) )
   			$content .= '<span>' . $description . '</span>';
   
   	}
   
   	return $content;
   }
   
   /**
    * Register menu item filter.
    */
   function md_menu_item_register_filter( $item_classes, $item, $args ) {
   	if ( has_post_thumbnail( $item->ID ) )
   		add_filter( 'the_title', 'md_menu_item_content', 15, 2 );
   
   	return $item_classes;
   }
   add_filter( 'nav_menu_css_class', 'md_menu_item_register_filter', 15, 3 );

   .sidebar-vertical a {position:relative;display:block;color:#21a6df;font:bold 16px/1.2 arial;}
   .sidebar-vertical a img{vertical-align:bottom;}
   .sidebar-vertical a > span{position:absolute;left:10px;bottom:15px;z-index:2;max-width:190px;padding:10px;background:#fff;}

Reply

You must log in to post.