- This topic has 31 replies, 3 voices, and was last updated 2 years, 3 months ago by Elvin.
-
AuthorPosts
-
December 8, 2021 at 10:34 pm #2043186John
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!
JohnDecember 8, 2021 at 11:01 pm #2043200ElvinStaffCustomer SupportHi 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
December 8, 2021 at 11:06 pm #2043204JohnHi 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?
December 8, 2021 at 11:41 pm #2043218ElvinStaffCustomer SupportThe 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
December 9, 2021 at 12:53 am #2043263JohnThanks 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?
December 9, 2021 at 2:55 am #2043353JohnAnd 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.December 9, 2021 at 3:55 pm #2044131JohnHey Guys – any chance of an update on this please?
December 9, 2021 at 7:50 pm #2044210ElvinStaffCustomer SupportWe 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; }
December 13, 2021 at 2:34 pm #2047969JohnHey 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 TEST3Is that possible?
I cannot figure the css for it.December 13, 2021 at 4:25 pm #2048084YingStaffCustomer SupportHi 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; }
December 13, 2021 at 5:35 pm #2048127JohnHi Ying,
Great – that does hide them on Desktop – thank you.
What can be done for the mobile versions?December 13, 2021 at 5:51 pm #2048132ElvinStaffCustomer SupportYou 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; }
December 13, 2021 at 6:56 pm #2048150JohnThank 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?December 13, 2021 at 9:29 pm #2048215ElvinStaffCustomer SupportYou’ll have to add it on the parent menu item of Test 1, 2 and 3. 🙂
December 14, 2021 at 1:57 am #2048386JohnHmmmm – You mean in this case SERVICES?
This contains themega-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? -
AuthorPosts
- You must be logged in to reply to this topic.