M2 Mobile Menu Displaying as Desktop

Hello, I am using your MegaMenu module on a Magento 2.2.4 instance. I have 2 separate menus, one for desktop and one for mobile. Both menus are added to the page using the following layout xml:

<referenceContainer name="page.top">
<block class="Ubertheme\UbMegaMenu\Block\Menu" name="main.ub.mega.menu" template="Ubertheme_UbMegaMenu::main_menu.phtml">
<arguments>
<argument name="menu_key" xsi:type="string">hl-main-menu</argument>
<argument name="addition_class" xsi:type="string"></argument>
<argument name="is_mobile_menu" xsi:type="number">0</argument>
</arguments>
</block>
<block class="Ubertheme\UbMegaMenu\Block\Menu" name="mobile.ub.mega.menu" template="Ubertheme_UbMegaMenu::menu.phtml">
<arguments>
<argument name="menu_key" xsi:type="string">hl_mobile_menu</argument>
<argument name="addition_class" xsi:type="string"></argument>
<argument name="is_mobile_menu" xsi:type="number">1</argument>
</arguments>
</block>
</referenceContainer>
<!-- Move it to store.menu container-->
<move element="main.ub.mega.menu" destination="store.menu" before="-"/>
<move element="mobile.ub.mega.menu" destination="store.menu" after="-"/>

This does add both menus to the correct area, however the mobile menu’s data-device-type property is set to “desktop” despite the is_mobile_menu xml argument being set to 1 (true) in the layout xml. I assume this is the reason why both menus show at the same time, one stacked above the other. This can be viewed here: https://drive.google.com/file/d/1IXAV7JnXHhkXjQeWp_vtgxHRfcq4p7M-/view?usp=sharing
Can you please explain to me what I am doing wrong here or fix if the issue is a bug on your end? I went through the documentation and support questions and did not find anything relevant to this issue. Thank you

4 answers

Profile photo of Ziven Staff 97640.00 $tone August 24, 2018
Public

Hi There,

Can you please explain to me what I am doing wrong here or fix if the issue is a bug on your end? I went through the documentation and support questions and did not find anything relevant to this issue. Thank you

I wonder why you use two separated menu -- one for desktop and one for mobile, instead of using the default off-canvas that our UB Mega Menu supports by default. If I understand your circumstance, I may reply in more details.  

If following your current approach, you can edit your code as follows: 

<referenceContainer name="page.top">
<block class="Ubertheme\UbMegaMenu\Block\Menu" name="main.ub.mega.menu" template="Ubertheme_UbMegaMenu::main_menu.phtml">
<arguments>
<argument name="menu_key" xsi:type="string">hl-main-menu</argument>
<argument name="addition_class" xsi:type="string"></argument>
<argument name="is_mobile_menu" xsi:type="number">0</argument>
</arguments>
</block>
<block class="Ubertheme\UbMegaMenu\Block\Menu" name="mobile.ub.mega.menu" template="Ubertheme_UbMegaMenu::menu.phtml">
<arguments>
<argument name="menu_key" xsi:type="string">hl_mobile_menu</argument>
<argument name="addition_class" xsi:type="string"></argument>
<argument name="is_mobile_menu" xsi:type="number">1</argument>
</arguments>
</block>
</referenceContainer>
<!-- Move it to store.menu container-->
<move element="main.ub.mega.menu" destination="store.menu" before="-"/>
<move element="mobile.ub.mega.menu" destination="store.menu" after="-"/>

Make a little change below:

<referenceContainer name="page.top">
<block class="Ubertheme\UbMegaMenu\Block\Menu" name="main.ub.mega.menu" template="Ubertheme_UbMegaMenu::main_menu.phtml">
<arguments>
<argument name="menu_key" xsi:type="string">hl-main-menu</argument>
<argument name="addition_class" xsi:type="string">show_in_desktop</argument>
<argument name="is_mobile_menu" xsi:type="number">0</argument>
</arguments>
</block>
<block class="Ubertheme\UbMegaMenu\Block\Menu" name="mobile.ub.mega.menu" template="Ubertheme_UbMegaMenu::menu.phtml">
<arguments>
<argument name="menu_key" xsi:type="string">hl_mobile_menu</argument>
<argument name="addition_class" xsi:type="string">show_in_mobile</argument>
<argument name="is_mobile_menu" xsi:type="number">1</argument>
</arguments>
</block>
</referenceContainer>
<!-- Move it to store.menu container-->
<move element="main.ub.mega.menu" destination="store.menu" before="-"/>
<move element="mobile.ub.mega.menu" destination="store.menu" after="-"/>

Then you need to add style for the 2 class above:
show_in_desktop
show_in_mobile
 
Best Regards,
Ziven.
 
 
 
 
 
 
 

#1
Profile photo of Daniel Gonzalez 180.00 $tone August 24, 2018
Public

I can manually write the less/css to handle that although it seems like your module is almost set up to do that already. What is the function of this argument in layout xml? 

<argument name="is_mobile_menu" xsi:type="number">1</argument>

As far as I can tell, it doesn’t matter what this argument is set to. It doesn’t apply any classes and regardless of whether it is set to true or false, data-device-type is always “desktop”:

<div id="ub-mega-menu-5" data-device-type="desktop" class="ub-mega-menu-wrapper">

In view/frontend/web/js/ub_mega_menu.js line 32 -- 48 the mobile menu javascript toggle code is commented out. This makes the menu toggle button not work. Simply uncommenting the code allows the toggle functionality to work again. Is this intended by uberthemes?
 

#2
Profile photo of Mall Staff 184000.00 $tone August 25, 2018
Public

Hi Daniel,
I’d like to answer your questions below: 

<argument name="is_mobile_menu" xsi:type="number">1</argument>

That is a param used in the old version of UB Mega Menu. It helps to specify a menu used for off-canvas menu (mobile menu). However, this process has been removed in the latest version of UB Mega Menu (ver.1.1.0). You should consider upgrading to the latest UB Mega Menu version.

As far as I can tell, it doesn’t matter what this argument is set to. It doesn’t apply any classes and regardless of whether it is set to true or false, data-device-type is always “desktop”:

The value of the ‘data-device-type’ is detected by our module automatically via PHP and it does not relate to the param ‘is_mobile_menu’ you mentioned above.

In view/frontend/web/js/ub_mega_menu.js line 32 — 48 the mobile menu javascript toggle code is commented out.

Yes, that is right. Because that latest version of our module no longer use such code lines. You shouldn’t comment out as you did. We highly recommend you upgrade to the latest UB Mega Menu version 1.1.0 instead.

Regards,
Mall.
 
 
 
 

#3
Profile photo of Mall Staff 184000.00 $tone August 25, 2018
Public

Hi there,

I am using version 1.1.0. I upgraded yesterday before creating this ticket

So, that is strange with the issues you mentioned in your reply #2. Please provide me your site info below: 

  • Admin URL of your M2 instance
  • Admin and SSH credentials of your M2 instance
  • Let me know the path to M2 root directory

I will check and get back to you then. 
PS. Please make sure you mark your reply ‘private’ when providing us your site credentials. 
Regards,
Mal.

#4

Please login or Register to Submit Answer

Written By

Comments