Menu with Subitems *and* HTML Block?

Hello,

I would like to assign a HTML block to a menu item with subitems, but I can’t find a working way.

On desktop we would like to use the HTML block to have design freedom.
But it is very important, to also have all subitems directly within the mobile menu.

When I now add a HTML block to a menu item with subitems, on desktop only the normal menu is shown and not the HTML block. On mobile view the subitems aren’t shown.

Hello,

Please read our detailed documentation on how to use HTML Block as mega menu items.

https://xtemos.com/docs/woodmart/html-blocks-2/

And the HTML Blocks don’t work for mobile devices.

Regards.
Xtemos Studios.

Hello,

it would be nice if you could read my message first before replying.

I know, that HTML Blocks don’t work for mobile devices. Because of that we want to use HTML Block for dropdown on menuitems with submenus – so that the regular submenu can be shown on mobile.

But:

When I now add a HTML block to a menu item with subitems, on desktop only the normal menu is shown and not the HTML block. On mobile view the subitems aren’t shown.

Hello,

Sorry for the misunderstanding. Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Thank you in advance.

Hello,

Sorry but this is how it works by default if you add sub-items then the HTML Block will not be displayed.

Please try removing the Subitems.

Regards.
Xtemos Studios

This is not a workable solution, because then the sub-navigation in the mobile view is missing!

It would be nice to add this feature with an update.

As a workaround I fixed it with these changes:

Add CSS to desktop view:

li.menu-mega-dropdown.wd-event-hover:hover > div.wd-dropdown,
li.menu-mega-dropdown.wd-event-click.wd-opened > div.wd-dropdown,
li.menu-mega-dropdown > div.wd-dropdown.wd-opened
{ visibility: visible; opacity: 1 }
li.menu-mega-dropdown.wd-event-hover:hover > div.wd-dropdown:last-child,
li.menu-mega-dropdown.wd-event-click.wd-opened > div.wd-dropdown:last-child,
li.menu-mega-dropdown > div.wd-dropdown.wd-opened:last-child { visibility: hidden; opacity: 0; }

Add CSS to mobile view:
.mobile-nav .menu-item-has-children.menu-item-has-block .wd-nav-opener { display: inline-flex; }

Change /inc/functions.php in template folder (currently in line 1220, not update-safe):
if ( $block && ! $args->walker->has_children && 'default' !== $design ) {
to
if ( $block && 'default' !== $design ) {

Note: It works in my case if all menu punket have submenus and HTML blocks. In deviating cases individual adjustments with the CSS are necessary. Because of missing clear CSS classes I could not store here unfortunately generally valid CSS classes.

Hello,

We are Glad that you found the solution for yourself.

For now and I am forwarding this to our development department for considering to add it in the theme,
but I am not giving you the guarantee for that because please note that a theme cannot satisfy all requirements as it may cause theme heaviness. Sometimes it may require your own customization. So if the development department finds it fit with the theme environment then surely they will look through it.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Best Regards.

Hello,

We are glad that you found the solution for yourself.

For now and I am forwarding this to our development department for considering adding it to the theme.

You have mentioned in the survey that you are not satisfied with the support. Let us know if there’s anything else we can do for you??

Also, let us know how we can improve our support for better customer satisfaction.

Best Regards.

Hello.

It’s disappointing to see how such useful features as the ability to use HTML blocks in desktop menus are barely usable in practice – precisely because mobile use is becoming more and more important, the mobile menu must not be cut here and deprived of submenus.

And it’s a shame that a simple fix (at least as a workaround, I know that a general fix would be a bit more work) only gets such carefully worded feedback. I don’t expect a huge enthusiastic thank you. But the importance for a good mobile UX seems to me not to be recognized, when using this “mega menus” via HTML blocks without an alternative in the mobile menu.

Hello,

We have a workaround for that.

You can try creating a separate menu for mobile and set it as the mobile side menu by editing the menu.

Screenshot for Clarification: https://ibb.co/S52hP0p

Then you can display a separate menu for mobile.

Regards.
Xtemos Studios.

Hello,

ok, that looked good at first glance. But that only works for the main menu and not the “browse categories” menu, right?
And why is there a “my account” including submenu added automatically as the last menu item?

Hello,

You can also choose the separate Categories menu for mobile by editing the mobile menu from Woodmart >> Header builder.

Screenshot for Clarification: https://gyazo.com/0286cd2c7577c320b6e7dc420b765364

And yes the Account, Wishlist added to the Mobile menu automatically we can hide using CSS.

Regards.
Xtemos Studios.

Okay, thank you very much!
Sometimes you can’t see the forest for the trees. Or the setting for the options.

Then we must have talked past each other a bit before.

The solution is now not as intuitive as I wanted to proceed, so an implementation of the direct way would still be desirable. But the additional effort is manageable (the first level of both menus must be created a second time), so that we would currently go this way than with theme updates always also to check whether our own fix still works.

Hello,

Thank you So much for your kind words. We will consider adding it to our future update of the theme.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Best Regards.

One question regarding the Mobile Side Menu is still unanswered – maybe it’s also a setting I didn’t seeuntil now?

why is there a “my account” including submenu added automatically as the last menu item?

Hello,

Sorry but there are no settings available, unfortunately.

You can remove it using Custom CSS.

Best Regards.

[Author]

Posts