Tom Hemsley – Page 15 – Max Mega Menu

How to create “Buttons” using Max Mega Menu Pro

Posted by Tom Hemsley on March 27, 2017

Menu Setup In this example we will change the “My Button” menu item so that it is styled independently of the rest of the menu items, giving it a “button” appearance. The “My Button” menu item is a Custom Menu Item added to the menu structure in the usual way:…

How do I get Max Mega Menu to work in my custom theme?

Posted by Tom Hemsley on March 27, 2017

There are no special requirements to get Max Mega Menu working with your custom theme, you only need to make sure you use the core WordPress functions to register and display your menu correctly. Step 1 – Register a Menu Location Use the register_nav_menu or register_nav_menus function to add a…

Fjord (YooThemes)

Posted by Tom Hemsley on March 23, 2017

Unfortunately, due to the proprietary framework that YooThemes use with Fjord (the theme does not use standard WordPress theme coding conventions), Max Mega Menu is not compatible with Fjord.

i-spirit

Posted by Tom Hemsley on March 21, 2017

i-spirit overrides the default styling of Max Mega Menu in such a way that makes it almost impossible to fix the problems that this has caused. These issues include: Settings in the theme editor not working and sub menus not displaying correctly when the sub menu type is set to “Mega…

Eco Press

Posted by Tom Hemsley on March 20, 2017

Fix mobile menu Go to Appearance > Customize > Additional CSS and paste in the following:

header nav {
  display: block !important;
}

header .resp_mid_nav_wrap {
  display: none !important;
}

header nav {

display: block !important;

}

header .resp_mid_nav_wrap {

display: none !important;

}

Can I use a different menu for mobile?

Posted by Tom Hemsley on March 9, 2017

In most cases, your theme will show the exact same menu on desktop and mobile (it will just be displayed differently depending on the width of your browser). Therefore, it is not usually possible to display one menu on desktop, and another menu on mobile. However, there are plugins available…

Rowling

Posted by Tom Hemsley on March 9, 2017

Fix mobile menu and residual styling Copy the theme header.php file to your Child Theme. Find and delete (line ~128):

<div class="nav-toggle">
	
	<div class="bars">
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
	</div>
	
</div> <!-- /nav-toggle -->

</div>

</div>

Find (line ~126):

<ul class="primary-menu">
	
	<?php if ( has_nav_menu( 'primary' ) ) {
													
		wp_nav_menu( array( 
		
			'container' => '', 
			'items_wrap' => '%3$s',
			'theme_location' => 'primary'
										
		) ); } else {
	
		wp_list_pages( array(
		
			'container' => '',
			'title_li' => ''
		
		));
		
	} ?>
										
</ul>

<?php if ( has_nav_menu( 'primary' ) ) {

wp_nav_menu( array(

'container' => '',

'items_wrap' => '%3$s',

'theme_location' => 'primary'

) ); } else {

wp_list_pages( array(

'container' => '',

'title_li' => ''

));

} ?>

</ul>

Replace with:

<?php if ( has_nav_menu( 'primary' ) ) {
												
	wp_nav_menu( array( 
	
		'container' => '', 
		'items_wrap' => '%3$s',
		'theme_location' => 'primary'
									
	) ); } else {

	wp_list_pages( array(
	
		'container' => '',
		'title_li' => ''
	
	));
	
} ?>

<?php if ( has_nav_menu( 'primary' ) ) {

wp_nav_menu( array(

'container' => '',

'items_wrap' => '%3$s',

'theme_location' => 'primary'

) ); } else {

wp_list_pages( array(

'container' => '',

'title_li' => ''

));

} ?>

Configuring mobile menu plugins to work with Max Mega Menu

Posted by Tom Hemsley on March 9, 2017

There are many plugins available which will add a dedicated mobile menu to your website. If you prefer to use one of these instead of the default Max Mega Menu mobile menu, these instructions will help you configure your dedicated mobile menu plugin. There are many dedicated mobile menu plugins…

How to add a bottom border or shadow to the menu

Posted by Tom Hemsley on March 7, 2017

Add bottom border to menu (desktop and mobile) To add a bottom border to the menu, go to Mega Menu > Menu Themes and paste the following into the Custom Styling area:

#{$wrap} {
    border-bottom: 3px solid red;
}

#{$wrap} {

border-bottom: 3px solid red;

}

Add bottom border to menu (desktop only) To add a bottom border to the desktop version of the menu…

Swell

Posted by Tom Hemsley on February 23, 2017

Fix mobile menu and residual styling Step 1 Go to Appearance > Customize > Additional CSS and paste in the following:

@media only screen and (min-width: 700px) {
    #main-nav-mega {
	right: 0;
	position: absolute;
	margin-top: -6px;
    }
}

@media only screen and (min-width: 700px) {

#main-nav-mega {

right: 0;

position: absolute;

margin-top: -6px;

}

Step 2 Copy the theme header.php file to your Child Theme. Find:

<div id="main-nav" class="">

	<?php wp_nav_menu( array(
		'container'			=> 'nav',
		'container_id'		=> 'main-menu',
		'menu_class' 		=> 'sf-menu clear',
		'theme_location'	=> 'primary',
		'fallback_cb' 		=> 'main_nav'
	) ); ?>

</div>
<a href="#main-menu" id="menu-toggle"></a>

<?php wp_nav_menu( array(

'container' => 'nav',

'container_id' => 'main-menu',

'menu_class' => 'sf-menu clear',

'theme_location' => 'primary',

'fallback_cb' => 'main_nav'

) ); ?>

</div>

Replace with:

<div id="main-nav-mega" class="">

	<?php wp_nav_menu( array(
		'container'			=> 'nav',
		'container_id'		=> 'main-menu',
		'menu_class' 		=> 'sf-menu clear',
		'theme_location'	=> 'primary',
		'fallback_cb' 		=> 'main_nav'
	) ); ?>

</div>

<?php wp_nav_menu( array(

'container' => 'nav',

'container_id' => 'main-menu',

'menu_class' => 'sf-menu clear',

'theme_location' => 'primary',

'fallback_cb' => 'main_nav'

) ); ?>

</div>