MM in Benevolence theme not working correctly in mobile

  • Resolved aezzell8_MIT

    (@usherbrandwp)


    4 years ago

    I’ve got a dev site running Benevolence 3.2 from WPLook. I have Max Mega Menu 2.9.1 installed. It appears to be working fine except on my phone and when my tablet is in portrait mode. Works fine on the tablet in landscape.

    For testing, the menu is currently set up this way:

    New to UU? has the grid layout
    Ministry & Learning has the standard layout
    The other top-level items are all flyout menus

    The flyout menus work as expected.
    The standard layout works as expected.

    But the grid layout doesn’t work on my phone or in portrait layout on the tablet. When I click the + to open the submenu items, nothing happens.

    I tried setting the menu that has the grid layout not to display on mobile; that didn’t work. I can make it not display on desktop, but can’t make it not display on mobile. In fact, I can’t make ANY of the menus not display on mobile, just on desktop.

    I looked through the list of theme integration guides. Benevolence isn’t there. I did find 2 themes also by WPLook, but the code isn’t the same.

    I tried the approach in Removing Residual Styling, but that totally screwed up the menu display.

    This is the code in header.php for the Benevolence theme:

    <div class=”menu”>
    <nav role=”navigation” class=”site-navigation main-navigation” id=”site-navigation”>
    <div class=”responsive container_12″></div>
    <div class=”container_12 non-res”>
    <?php if ( has_nav_menu( ‘primary’ ) ) {
    wp_nav_menu( array(‘depth’ => ‘5’, ‘theme_location’ => ‘primary’, ‘container’ => ”));
    } ?>
    </div>
    </nav>
    <div class=”clear”></div>
    </div>

    Edited to add: the menu works as expected with the Twenty Twenty theme.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi usherbrandwp,

    Thanks for posting a link. The mobile menu you can see if controlled by your theme, not MMM, which explains why you’re seeing odd behaviour. To hide the theme mobile menu and reveal MMM, please add this custom CSS to your site:

    .menu .container_12.non-res {
	display: block !important;
}
.menu .responsive {
	display: none !important;
}

    Regards,
    Tom

    Thread Starter aezzell8_MIT

    (@usherbrandwp)

    Thank you, Tom

    That helped some, in that I could now see the mega menu on my phone and in portrait mode on my tablet, but instead of seeing the hamburger toggle to open the menu, I saw the top-level menu items all stacked on top of each other like an accordion.

    Screenshot: https://new.phoenixuu.org/megamenumobile.png

    Then I remembered (thankfully, before I hit send on the above response) that I had checked Disable Mobile Toggle Bar earlier in the process. Once I unchecked that, things appear to be working correctly again, although I will want to tweak the CSS styling, I think.

    Screenshot: https://new.phoenixuu.org/megamenumobilesuccess.png

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘MM in Benevolence theme not working correctly in mobile’ is closed to new replies.