[Resolved] Add Imageto Mega Menu

Home Forums Support [Resolved] Add Imageto Mega Menu

Home Forums Support Add Imageto Mega Menu

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #2043186
    John

    Hi there,

    Is it possible to use the CSS for your Mega Menu: https://docs.generatepress.com/article/building-simple-mega-menu/
    But also to include a little 50px image (maybe featured image) to the left of each page that is a Child/Grandchild?

    Cheers!
    John

    #2043200
    Elvin
    Staff
    Customer Support

    Hi John,

    That’s quite tricky to do and refine but it should be possible by filtering the menu item objects.

    See this stackoverflow answer – https://wordpress.stackexchange.com/a/87027

    #2043204
    John

    Hi Elvin,

    Thank you for the reply.
    So that code seems to replace the text with the image – is that correct?
    I am looking to have both – is that possible via this method?

    And obviously this seems a little more involved than copy/paste some filters.

    Is this beyond scope support?

    #2043218
    Elvin
    Staff
    Customer Support

    The filter is an example of how it’s going to be possible but I’m not exactly sure how you want things to be laid out exactly or if there’s any specific behavior you wish to add.

    But we can modify this filter or expand it to add more.

    Like changing the foreach loop to this:

        // edit the menu objects
        foreach ($sorted_menu_objects as $menu_object) {
            // searching for menu items linking to posts or pages
            // can add as many post types to the array
            if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
                // set the title to the post_thumbnail if available
                // thumbnail size is the second parameter of get_the_post_thumbnail()
    			$thumbnail = '<div class="menu-thumbnail">'.get_the_post_thumbnail($menu_object->object_id, 'thumbnail').'</div>';
    			if (has_post_thumbnail($menu_object->object_id)) {
    				$menu_object->title = $thumbnail.'<span class="menu-item-label">'.$menu_object->title.'</span>';
    			}
                
            }
        }

    And add this CSS:

    ul.sub-menu li.menu-item a {display: flex !important;align-items: center;}
    
    ul.sub-menu li.menu-item > a > .menu-thumbnail {
       flex: 1 0 20%;
       margin-right: 10px;
    }
    
    ul.sub-menu li.menu-item > a > span {
        flex: 1 0 80%;
    }
    
    ul.sub-menu .menu-thumbnail > img {
        width: 100% !important;
    }

    Which will have this effect – https://share.getcloudapp.com/GGu4YY4N

    #2043263
    John

    Thanks for this…
    OK – here is a link to the page:
    https://wordpress-681983-2245781.cloudwaysapps.com/

    Under Services you will see the Mega Menu as per your CSS.

    I have added the snippet as this:

    add_filter('wp_nav_menu_objects', 'ad_filter_menu', 10, 2);
    
    function ad_filter_menu($sorted_menu_objects, $args) {
    
        // check for the right menu to filter
        // here we check for the menu with name 'Posts Menu'
        // given that you call it in you theme with:
        //   wp_nav_menu( array( 'menu' => 'Posts Menu' ) );
        // if you call the menu using theme_location, eg:
        //   wp_nav_menu( array( 'theme_location' => 'top_manu' ) );
        // check for:
        //   if ($args->theme_location != 'top_menu')
        if ($args->menu != 'Posts Menu')
            return $sorted_menu_objects;
    
        // edit the menu objects
        foreach ($sorted_menu_objects as $menu_object) {
            // searching for menu items linking to posts or pages
            // can add as many post types to the array
            if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
                // set the title to the post_thumbnail if available
                // thumbnail size is the second parameter of get_the_post_thumbnail()
    			$thumbnail = '<div class="menu-thumbnail">'.get_the_post_thumbnail($menu_object->object_id, 'thumbnail').'</div>';
    			if (has_post_thumbnail($menu_object->object_id)) {
    				$menu_object->title = $thumbnail.'<span class="menu-item-label">'.$menu_object->title.'</span>';
    			}
                
            }
    	}	
    
        return $sorted_menu_objects;
    }

    Is it targeting the correct menu name? Does not seem to be pulling any images through?

    #2043353
    John

    And also – is there a way to hide the Child Menu Titles?
    Or some work around that I can target them to make them look invisible!
    Thanks again.

    #2044131
    John

    Hey Guys – any chance of an update on this please?

    #2044210
    Elvin
    Staff
    Customer Support

    We can modify the PHP snippet to this so it only applies to the primary menu.

    add_filter('wp_nav_menu_objects', 'ad_filter_menu', 10, 2);
    
    function ad_filter_menu($sorted_menu_objects, $args) {
    
        // check for the right menu to filter
        // here we check for the menu with name 'Posts Menu'
        // given that you call it in you theme with:
        //   wp_nav_menu( array( 'menu' => 'Posts Menu' ) );
        // if you call the menu using theme_location, eg:
        //   wp_nav_menu( array( 'theme_location' => 'top_manu' ) );
        // check for:
        //   if ($args->theme_location != 'top_menu')
        if ($args->theme_location === 'primary'){
    		// edit the menu objects
    		foreach ($sorted_menu_objects as $menu_object) {
    			// searching for menu items linking to posts or pages
    			// can add as many post types to the array
    			if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
    				// set the title to the post_thumbnail if available
    				// thumbnail size is the second parameter of get_the_post_thumbnail()
    				$thumbnail = '<div class="menu-thumbnail">'.get_the_post_thumbnail($menu_object->object_id, 'thumbnail').'</div>';
    				if (has_post_thumbnail($menu_object->object_id)) {
    					$menu_object->title = $thumbnail.'<span class="menu-item-label">'.$menu_object->title.'</span>';
    				}
    
    			}
    		}
    		
    	}
    	return $sorted_menu_objects;
    
    }

    We then add this CSS if you want the titles hidden on submenu items.

    ul.sub-menu .menu-item-label { display: none; }

    #2047969
    John

    Hey Elvin,

    Thank you for your support on this.
    I am nearly complete with this menu and think it is looking good.
    The last piece of css hides all the titles.

    I want to only hide the “CHILDREN” ones…
    So – TEST 1, TEST 2 and TEST3

    Is that possible?
    I cannot figure the css for it.

    #2048084
    Ying
    Staff
    Customer Support

    Hi John,

    Do you only want to hide the menu items on desktop?

    If so, try this CSS:

    .main-navigation .main-nav > ul > li#menu-item-4857 > ul > li >a {
        display: none !important;
    }
    #2048127
    John

    Hi Ying,

    Great – that does hide them on Desktop – thank you.
    What can be done for the mobile versions?

    #2048132
    Elvin
    Staff
    Customer Support

    You can try something like this:

    #mobile-header li.menu-item.menu-item-4857 li ul.sub-menu,
    #mobile-header li.menu-item.menu-item-4857 li  span.dropdown-menu-toggle{ 
    display:none; 
    }

    But I suggest applying a unique class on the menu item on mobile so it works for the class regardless if you change menu item id.

    You can apply class to menu items through Appearance > Menus. https://share.getcloudapp.com/ApuE7EBq

    You can try adding hide-submenu-on-mobile class to the menu item you wish to hide submenu on and then use this CSS:

    #mobile-header li.menu-item.hide-submenu-on-mobile li ul.sub-menu,
    #mobile-header li.menu-item.hide-submenu-on-mobile li  span.dropdown-menu-toggle{ 
    display:none; 
    }
    #2048150
    John

    Thank you for the detailed reply.
    I tried the second method – added the class to the three items TEST 1 TEST 2 TEST 3
    Added the css.
    Doesn’t seem to make any difference.
    Any thoughts?

    #2048215
    Elvin
    Staff
    Customer Support

    You’ll have to add it on the parent menu item of Test 1, 2 and 3. 🙂

    #2048386
    John

    Hmmmm – You mean in this case SERVICES?
    This contains the mega-menu mega-menu-col-3 class.
    Am I thinking about this the wrong way? (Probabaly!)

    I did just add the other css:

    #mobile-header li.menu-item.menu-item-4857 li ul.sub-menu,
    #mobile-header li.menu-item.menu-item-4857 li  span.dropdown-menu-toggle{ 
    display:none; 
    }

    But this keeps the TEST1,2 and 3 and removes the pages I want to keep.
    Am I getting this worng?

Viewing 15 posts - 1 through 15 (of 32 total)
  • You must be logged in to reply to this topic.