M2 Mobile Menu Displaying as Desktop

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.
 
 
 
 
 
 
 

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.
 
 
 
 

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.