Tom Hemsley – Page 17 – Max Mega Menu

Cosily

Posted by Tom Hemsley on February 2, 2017

Fix Mobile Menu Go to Appearance > Customize > Additional CSS and enter the following:

.mega-menu-primary .header .nav nav > select {
    display: none !important;
}
.mega-menu-primary .header .nav {
    padding: 0;
    background: none;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0;
    z-index: 999999999;
    position: relative;
    cursor: auto;
    top: 14px;
    overflow: visible;
}
@media screen and (max-width: 1200px) {
    .mega-menu-primary .header .nav {
        width: 700px;
    }
}
@media screen and (max-width: 1023px) {
    .mega-menu-primary .header .nav {
        width: 100%;
        clear: both;
        float: none;
        margin-bottom: 20px;
        top: 0;
    }
}

.mega-menu-primary .header .nav nav > select {

display: none !important;

}

.mega-menu-primary .header .nav {

padding: 0;

background: none;

height: auto;

border: 0;

border-radius: 0;

box-shadow: 0 0 0;

z-index: 999999999;

position: relative;

cursor: auto;

top: 14px;

overflow: visible;

}

@media screen and (max-width: 1200px) {

.mega-menu-primary .header .nav {

width: 700px;

}

@media screen and (max-width: 1023px) {

.mega-menu-primary .header .nav {

width: 100%;

clear: both;

float: none;

margin-bottom: 20px;

top: 0;

}

NewsCore

Posted by Tom Hemsley on February 2, 2017

Fix Mobile Menu Go to Mega Menu > Menu Themes and paste the following into the “Custom Styling” area:

@include mobile {
  .menu-trigger.dl-active + #mega-menu-wrap-primary {
    display: block;
  }
  #mega-menu-wrap-primary {
    display: none;
  }
}

@include mobile {

.menu-trigger.dl-active + #mega-menu-wrap-primary {

display: block;

}

#mega-menu-wrap-primary {

display: none;

}

Mobile Menu Setup Go to Mega Menu > Menu Themes. In the Mobile section, set the following: Responsive Breakpoint: 767px Disable Mobile Toggle: checked

Lambda

Posted by Tom Hemsley on February 1, 2017

Mega Menu settings inaccessible for newly added items By default, Lambda saves the menu structure using AJAX. This will stop the menu page from refreshing during the menu save process, and in turn stop Max Mega Menu from being able to detect that the menu structure has been updated. To…

Magazine by MyThemeShop

Posted by Tom Hemsley on February 1, 2017

Remove Residual Styling (and use the Max Mega Menu Mobile Menu) Copy the header.php file to your Child Theme. Find (~line 67):

<div id="sticky" class="primary-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
  <div class="container">
    <a href="#" id="pull" class="toggle-mobile-menu">Menu</a>
    <nav id="navigation" class="clearfix<?php if ( $mts_options['mts_show_primary_nav'] == '1' ) echo ' mobile-menu-wrapper'; ?>">
		<?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
			<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>
		<?php } else { ?>
			<ul class="menu clearfix">
				<?php wp_list_pages('title_li='); ?>
			</ul>
		<?php } ?>
	</nav>
   </div> 
</div>
<div id="catcher"></div>

<?php if ( has_nav_menu( 'primary-menu' ) ) { ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>

<?php } else { ?>

<?php wp_list_pages('title_li='); ?>

</ul>

<?php } ?>

</nav>

</div>

Replace with:

<div role="navigation" class="mega-primary-navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
  <div class="container">
		<?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
			<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>
		<?php } else { ?>
			<ul class="menu clearfix">
				<?php wp_list_pages('title_li='); ?>
			</ul>
		<?php } ?>
   </div> 
</div>
<div id="catcher"></div>

<?php if ( has_nav_menu( 'primary-menu' ) ) { ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>

<?php } else { ?>

<?php wp_list_pages('title_li='); ?>

</ul>

<?php } ?>

</div>

Full width background color for menu bar To restore the full width background color for the menu bar, go to Appearance > Customize >…

Entrance

Posted by Tom Hemsley on January 22, 2017

Mobile Menu Items not clickable Go to Appearance > Customize > Additional CSS and enter the following:

#mainnav {
    position: relative;
    z-index: 99999999;
}

#mainnav {

position: relative;

z-index: 99999999;

}

Tabbed Mega Menus

Posted by Tom Hemsley on January 19, 2017

How to set up a Tabbed Mega Menu Menu Structure The menu structure defines the tabs which are visible in the mega menu. It is possible to use the Mega Menu builder to design the content of each tab. This menu structure creates a tabbed mega menu: Displaying Widgets inside…

News Magazine (by webdorado)

Posted by Tom Hemsley on January 17, 2017

Fix Mobile Menu Copy the theme header.php file to your child theme. Find:

<nav id="top-nav">

1	<nav id="top-nav">

Replace with:

<nav>

<nav>

Delete:

<div id="menu-button-block">
	<div class="active_menu_responsive">
		
			<span style="display:inline-block; float:left; padding:0 10px;">
				<span id='trigram-for-heaven'></span>
			</span>
			<span style="position:relative; padding-right:7px;"><?php echo __('Menu', "news-magazine"); ?> </span>
		
	</div>
</div>

</span>

</div>

How to add a Logout Link to your menu

Posted by Tom Hemsley on January 17, 2017

Adding a logout link to a menu in WordPress is not as easy as it sounds, as the WordPress logout URL is customised for each user. The logout URL has a “nonce” parameter which is unique to the logged in user. If the “nonce” is incorrect then the user will…

How to adjust the “Hover Transitions” speed

Posted by Tom Hemsley on January 17, 2017

Under Mega Menu > Menu Themes, it’s possible to enable “Hover Transitions” for menu items, making the menu item background and font color transition when a link is moused over. How to adjust the transition speed Go to Mega Menu > Menu Themes and enter the following into the Custom Styling…

What does “Hover Intent” mean?

Posted by Tom Hemsley on January 17, 2017

The default Event option is “Hover Intent”. This option can be found on the Appearance > Menus page. Hover Intent is described as “a plug-in that attempts to determine the user’s intent… like a crystal ball, only with mouse movement! It is similar to jQuery’s hover method. However, instead of calling…