Tom Hemsley – Page 27 – Max Mega Menu

WooCommerce

Posted by Tom Hemsley on February 16, 2016

In this guide we’ll bring together many of the options available within Max Mega Menu to display a WooCommerce cart icon with “ajax enabled” cart totals. How to add a WooCommerce Cart Total to your Menu Create a new menu item for the cart total To add a WooCommerce Cart…

Creating multilingual mega menus with WPML

Posted by Tom Hemsley on February 11, 2016

With Max Mega Menu and WPML you can create multilingual Mega Menus for your WordPress site. In this example we will assume the site and menu has been set up already and WPML has subsequently been installed to add support for another language. Our primary language is English and the language we’re…

Themify Ultra

Posted by Tom Hemsley on February 4, 2016

Themify Ultra includes Mega Menu functionality which conflicts with Max Mega Menu. It will stop the blue ‘Mega Menu’ button from appearing when hovering over menu items and make it impossible to save the menu settings. Use an FTP client to edit the class-mega-menu.php file in your theme directory. IMPORTANT IMPORTANT IMPORTANT:…

Shopper Responsive

Posted by Tom Hemsley on February 4, 2016

In your WordPress Dashboard, go to Mega Menu > Menu Themes. Select your active menu theme and insert the following into the ‘Custom Styling’ area on a new line:

.header_menu {
    display: block !important;
}

.header_menu {

display: block !important;

}

Set the Responsive Breakpoint setting to 768px.

Chester (YooThemes)

Posted by Tom Hemsley on January 28, 2016

Copy the “layouts/header.centered.php” file to your Child Theme. Find (line 42):

<?php echo $this['widgets']->render('menu'); ?>

1	<?php echo $this['widgets']->render('menu'); ?>

Replace with:

<?php wp_nav_menu( array( 'theme_location' => 'main_menu' ) ); ?>

1	<?php wp_nav_menu( array( 'theme_location' => 'main_menu' ) ); ?>

Go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

@include mobile {
    .tm-navbar {
        display: block;
    }
}

@include mobile {

.tm-navbar {

display: block;

}

Flatsome

Posted by Tom Hemsley on November 19, 2015

Under Appearance > Menus, tag your main menu to both the ‘Main Menu’ and ‘Main Menu – Mobile’ Location. Enable Max Mega Menu for the Main Menu location (but not the ‘Main Menu – Mobile’ Location – we will let the theme manage the mobile menu). Under Mega Menu >…

Visia

Posted by Tom Hemsley on November 16, 2015

Step 1 From your WordPress Dashboard, go to Appearance > Editor. Select menu.php on the right. Find:

        <!-- Mobile Nav Button -->
        <button type="button" class="nav-button" data-toggle="collapse" data-target=".nav-content">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <!-- Navigation Links -->
        <div class="navigation">
            <div class="nav-content">
                <?php $t->menu->show("main"); ?>
            </div>
        </div>

</button>

<?php $t->menu->show("main"); ?>

</div>

Replace with:

    <?php if (function_exists( 'max_mega_menu_is_enabled') && max_mega_menu_is_enabled('main') ) : ?>
         <?php wp_nav_menu(array('theme_location' => 'main')); ?>
    <?php else: ?>
    	<!-- Mobile Nav Button -->
    	<button type="button" class="nav-button" data-toggle="collapse" data-target=".nav-content">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <!-- Navigation Links -->
        <div class="navigation">
    		<div class="nav-content">
    			<?php $t->menu->show("main"); ?>
    		</div>
    	</div>
    <?php endif; ?>

<?php if (function_exists( 'max_mega_menu_is_enabled') && max_mega_menu_is_enabled('main') ) : ?>

<?php wp_nav_menu(array('theme_location' => 'main')); ?>

<?php else: ?>

</button>

<?php $t->menu->show("main"); ?>

</div>

<?php endif; ?>

Step 2 Go to Mega Menu > Menu Themes and select your active menu theme. Set the “Panel Width” setting to: .content Replace the contents of the Custom Styling…

Jupiter

Posted by Tom Hemsley on November 13, 2015

Mobile menu is not visible From your WordPress Dashboard, go to Jupiter > Theme Options > Advanced > Custom CSS and insert the following:

header[id^="mk-header"] .mk-nav-responsive-link {
   display: none !important;
}
header[id^="mk-header"] .mk-header-nav-container {
   display: block !important;
}

header[id^="mk-header"] .mk-nav-responsive-link {

display: none !important;

}

header[id^="mk-header"] .mk-header-nav-container {

display: block !important;

}

Mobile menu disappears when clicked From your WordPress Dashboard, go to Jupiter > Theme Options > Advanced > Custom JS and enter the following:

jQuery(document).ready(function( $ ) {
	$(".mk-responsive-wrap").off().unbind();
});

jQuery(document).ready(function( $ ) {

$(".mk-responsive-wrap").off().unbind();

});

Fable

Posted by Tom Hemsley on November 11, 2015

This guide will completely replace the header section (including your logo) with Max Mega Menu. You will need to recreate the logo using the Menu Logo functionality in Max Mega Menu Pro. From your WordPress Dashboard, go to Appearance > Editor and select header.php on the right. Find:

<?php echo $Menu->create(); ?>

1	<?php echo $Menu->create(); ?>

Replace…