max mega menu not working in mobile

Hi, I have added theme integration instructions for Canvas here:

https://maxmegamenu.com/documentation/faqs/theme-integration/

Regards,
Tom

hi,

As per the documentation , i added that code to my beta site.But submenu is not displaying correctly.Instead of primary menu i use top menu.Also design of header changed(original design link).

Hi,

On the beta site it looks like the panel width is set to 100% (instead of #inner-wrapper like it is on the live site)

The mobile menu is being affected by custom styling in the theme (width: 700px and margin-left: 100px – this is being applied to mobiles too). You’ll need to use responsive CSS to make sure all custom styling is only applied on screen sizes over 600px.

Regards,
Tom

Hi Tom

My menu will not display correctly, it has a curve on the right hand side https://foreverorneverwedding.co.uk/services/health-safety/ on the menu heading “Blog” also when clicking on “Services” in the menu, it seems to have an arrow pointing left of Building Surveyor which I can’t seem to get rid of, could you please help with this?

Thanks
Joanne

Hi Tom

I have now fixed these issues, however, on a mobile device when you click on anything with a drop down list, on the first click it reveals the drop down list followed by immediately collapsing the list.

My website link is https://foreverorneverwedding.co.uk/

Thanks
joanne

I tried to change click event behaviour to “First click will open a submenu, second click will follow the link” but it doesn’t seem to want to change upon save.

I am under pressure to show my client their new website in the next few days, I would really appreciate some help on this.

Many Thanks
Joanne

Hi Joanne,

Do you mean the setting itself reverts back to “First click opens sub menu, second click closes sub menu”?

You will need to be testing on a touch screen device for the setting to take effect (or change the event to ‘click’ instead of hover)

Regards,
Tom

Sorry Tom, I e-mailed back but just seen it was a no reply, this was my message.

Hi Tom

Yes the setting itself reverts back.

I have been testing on my i phone and even when I have changed the event from click instead of hover but it still doesn’t work properly on a mobile.

I installed the plug in on another of my sites and it reverts back too, just thought it would be worthwhile testing incase I needed to reinstall the plug in.

I wonder if there is any code you could provide to help me with this at all as everything else works really well.

Many thanks
Joanne

Hi Joanne,

Please edit your themes header.php file and remove the ‘mobile-menu’ ID from the menu wrapper. I think it’s causing a conflict with some JavaScript in your theme.

https://screencast.com/t/VWrjXZiP

Regards,
Tom

Hi Tom

Thank you for your reply.

I can’t see anything like that in the header.php file, I can however see it in the mobile-menu.php file.
Would it be the following which needs to be removed?:-

<div id=”mobile-menu” class=”menu-container clearfix”>’;

wp_nav_menu(array(‘theme_location’ => ‘primary’,
‘container’ => false,
‘menu_class’ => ‘menu inner’,
‘fallback_cb’ => false
));
echo ‘</div>

Many Thanks
Joanne

Hi Joanne,

That looks like the right file, just delete this bit:

id="mobile-menu"

Regards
Tom

Hi Tom

Unfortunately that just duplicates the menu on a pc.

I wonder if you have any other ideas?

Many thanks, really appreciate it!

Thanks
Joanne

Hi Joanne,

In the mobile-menu.php file, please add a class to the <div>: ‘mobile-menu’.

Then, in the theme style.css file, add:

@media only screen and (min-width: 767px) {
    .mobile-menu {
        display: none;
    }
}

This will hide the mobile menu again for desktops, and hopefully still stop your theme from applying its own JavaScript to the menu like it was when the ‘mobile-menu’ ID was present.

Regards,
Tom

Hi Tom

Thank you for your reply.

Unfortunately I am not familiar with Javascript or PHP.

This is the mobile menu code, I wonder if you could show me what code to enter where please? I a fine with adding the CSS. Thanks again Joanne

<?php
/**
* Mobile Menu Template
*
* Displays the Mobile Menu if it has active menu items.
*
* @package Extinct
* @subpackage Template
*/

$menu_type = ‘mobile’;

if (!is_front_page() && is_page_template(‘template-single-page-site.php’)) :
mo_build_nav_menu_for_one_page_template($menu_type);
elseif (has_nav_menu(‘primary’)) :
echo ‘<div id=”mobile-menu” class=”menu-container clearfix”>’;

wp_nav_menu(array(‘theme_location’ => ‘primary’,
‘container’ => false,
‘menu_class’ => ‘menu inner’,
‘fallback_cb’ => false
));
echo ‘</div><!– #mobile-menu –>’;
else:
mo_build_nav_menu_one_page_site($menu_type);
endif;

Hi Joanne,

You’ll need to delete the ID and add a ‘mobile-menu’ class.

Overall, replace:

echo '<div id="mobile-menu" class="menu-container clearfix">';

With:

echo '<div class="mobile-menu menu-container clearfix">';

It is best to manually type out the changes instead of copying and pasting (sometimes this site converts straight quotes into curly ones and that can cause issues – so just type the changes into the file).

Regards,
Tom