Mega Menu / Sub Menu behavior on 4.1.1 - need help please - Support

Tagged: mega menu, mobile menu

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
July 16, 2017 at 4:42 pm #822076

goldengate415
Participant

Hi there,
I am still sorting through all the issues I’m running into on 4.1.1 and would really appreciate some help on the behavior of mega menus. I have a mega menu that then opens to a submenu, and it displays thumbnails that the user can click on to go to the page. In prior versions, the user could also click on the menu item above the thumbnail photo and that would also go to the page. However, with 4.1.1 the sub / mega menu handling is different and I notice you have included options on the theme options to try to give us ability to impact the behavior.

Right now under Enfold Settings —> Main Menu –> Burger / Mobile Menu I have it set to “Display submenu items on click” because I don’t want the submenu items to show up right away. However then I see this new message:
“Since you selected to display submenu items on click, the parent menu item does no longer navigate to the URL it contains, but toggles the visibility of its submenu items. If you want users to be able to open the parent menu URL the theme can create a clone of that item in the submenu”

and so I enable cloning the menu items. However now I have duplicate menu items (for example “About Thomas” opens up a submenu also called “About Thomas” so there are two of them, and then user has to click on “About Me” item. With the old menu, user would click on “About Thomas” and then “About Me” would open up. How do I make it work like that again with 4.1.1?

Similarly with the photo mega menus, there are now duplicated sub menus. However if I don’t enable the clone option, the submenu is not clickable, nor is the photo in the submenu.

If I change Enfold options to “display submenu items on hover” the sub items open and then close quickly.

Thanks for your help… I hope I have explained this clearly?

July 16, 2017 at 5:21 pm #822098

Mike
Moderator

Hey goldengate415,
Thank you for the great explanation of the issues, we would like to see this in action but, in the Private Content area you have a link to your site prior to 4.1.1 where everything works right, but I don’t see a link to your staging site to examine the issues.
Can you please include a admin login in the private content area to the staging site also?

Best regards,
Mike

July 16, 2017 at 6:02 pm #822119

goldengate415
Participant

Mike, oops, I’m going too fast… thanks, info in private content.

July 16, 2017 at 8:59 pm #822164

Mike
Moderator

Hi,
OK I see what you mean,
It seems you have a unique situation in that your menu with the images add more clones than you/we want. If you don’t “create a clone” in your burger menu then your listings first show as text, then a click shows the image, and clicking the image goes to the page. The only link that you can’t use is “Featured Homes For Sale” to go to the /featured-properties/ page.
It seems that you could use “don’t create a clone” and add one more link to the /featured-properties/ page and add a class to that link, we could write some CSS to hide that link unless the burger menu is showing.
What do you think of this as a solution?
I have “don’t create a clone” activate now on your staging site, try clicking the property image and you will go to the page.

Best regards,
Mike

July 16, 2017 at 9:07 pm #822167

goldengate415
Participant

Hi Mike, with the current menu, on the production site, on mobile view it does not show the pictures, only the property addresses… is there a way to somehow do that? I’m OK if it looks just like it did with Enfold 4.0 without the photos… would that be easier?

Thanks much!!!!

Rob

July 16, 2017 at 9:11 pm #822170

goldengate415
Participant

ps I just tried adding the “only_desktop” css class to the photo on the first property and it didn’t hide it… I saw another thread that css classes on the mobile menu aren’t working.

July 16, 2017 at 10:08 pm #822188

Mike
Moderator

Hi,
Hum, when I look I see the property addresses, and when I click that I see the image.
Is that what you are seeing?
I see that the burger menu is not getting the classes or IDs from the menu, I will ask the team for help with this.
If we can hide some items for desktop and others for the burger menu, would that be a good solution for you?

Best regards,
Mike

July 16, 2017 at 10:55 pm #822207

goldengate415
Participant

Hi Mike, thanks for your response.

For desktop – no changes.

For mobile – I would like it to be just like the menu on the production site. You click “featured properties” and the addresses appear WITHOUT photos, and if you click on the address, it goes to that page… simple.

So yes, if we can hide some items (the photos) on the burger menu for mobile, that would be great.

Thanks!
Rob

July 16, 2017 at 11:08 pm #822215

goldengate415
Participant

ps if you make any changes is custom css or elsewhere please be sure to add comment prior, thanks! Trying to keep it all clean! thanks

July 17, 2017 at 11:37 pm #823005

goldengate415
Participant

Hi I think Mike is only weekends on here… can someone else take this thread over?

Thanks
Rob

July 19, 2017 at 2:31 am #823589
Yigit
Keymaster
Hi Rob!

Sorry for the late reply!

Yes, Mike works on the weekends :)

You could try creating two different menus in Appearance > Menus one for mobile and one for desktop and then add following code to Functions.php file in Appearance > Editor
```
function av_different_mobile_menu( $args = '' ) {

if(wp_is_mobile()) { 
	$args['menu'] = 'main-menu-mobile';
} else { 
	$args['menu'] = 'main-menu';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'av_different_mobile_menu' );
```
Best regards,
Yigit
July 19, 2017 at 2:58 am #823592

goldengate415
Participant

Hi Yigit! Thanks for the response!

When I create the new menu, do I need to name it? Remember, I’m not a coder so reading the above might as well be Latin… :)

This is a less than ideal scenario because now I will have two main menus to maintain, both identical except one without thumbnails and one with. The old version of Enfold handled this great with zero need for a separate mobile menu. I am curious why this mobile menu was changed — it has caused several (many?) users lots of customization issues, and I don’t see any added functionality or ease. (I had the search box on my old menu with your code). I am not trying to be difficult, just trying to understand why a major change was made to the menu structure and we don’t see huge changes from the user experience side.

Is there any other way to do this so mobile menu will just hide those thumbnails? Can you guys make css class work on the thumbnails? It seems like this could be a bug as only_desktop css class should hide them but it does not?

Thanks for listening and helping!!!

Rob

July 19, 2017 at 3:45 am #823607

Yigit
Keymaster

Hi Rob,

I have adjusted HTML a bit in menu descriptions and added navigation label in it to be displayed on mobile menu. Can you please review your website once again? :)

Sorry for the inconvenience! There was a huge demand by Enfold users on updating mobile menu so Kriesi decided to replace old mobile menu with a brand new one. They do not function 100% the same however new menu is more flexible so it will make it easier for us to add more features to it.

I hope the solution i provided above works for you! :)

Best regards,
Yigit

July 19, 2017 at 4:03 am #823609

goldengate415
Participant

Ahhhh… an interesting solution, Yigit! You embedded the only_desktop in the image description… thank you for your effort here.Two concerns (don’t kill me…)

1. When adding menu items I’m going to have to re-figure it out each time… and these menu items get changed a LOT.
2. The click on the submenu then still requires another click to launch the page… versus the old menu or most menu behavior where the click on the submenu then takes you to the page… so not idea UX, and if it’s going to do that I might as well just have them click on the pretty picture… :)

Is there any way to enable the css class box where “only_desktop” would have the same effect and I wouldn’t have to then do special code for each menu option?

I am excited to see the new future mobile menu enhancements that 4.1.1 enables…. :)

Thanks again and sorry I’m being a pain on this….

Best,
Rob

July 19, 2017 at 8:56 pm #824151
Yigit
Keymaster
Hi Rob,

I have been thinking to find another way around it however currently it seems not that easily possible.

Custom CSS classes are not being applied on hamburger menu items and they do not have unique selectors. We need unique selectors to target only those menu items and then apply some customization to achieve the functionality you like. I reported this to our devs and i am pretty sure it will be included in upcoming patches however at the moment, i am unfortunately out of ideas..

I will ask my teammates in case they can come up with something

Best regards,
Yigit
- This reply was modified 7 years, 4 months ago by Yigit.
July 19, 2017 at 9:00 pm #824155

goldengate415
Participant

Thanks Yigit, I appreciate yours and Mike’s help on this… and your perseverance!

Encouraging to hear that a patch may be included in the future… if you can remember, can you ping me if and when this is included?

I also chuckled when Layer Slider released an update right after you just released your 4.1.1 update…. so we all again have an update alert! ha ha!! Are you guys just trying to mess with enfold?!?

Take care and ok to close this.

Rob

July 19, 2017 at 9:11 pm #824160

Yigit
Keymaster

Hi Rob,

Sure, i will definitely notify you when it is out!

LayerSlider team is working pretty hard :)

Thanks for your understanding Rob! Enjoy the rest of your day :)

Best regards,
Yigit
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Mega Menu / Sub Menu behavior on 4.1.1 – need help please’ is closed to new replies.