Tom Hemsley – Page 24 – Max Mega Menu

Pluton

Posted by Tom Hemsley on July 12, 2016

The following instructions will get Max Mega Menu working with Pluton. Step 1: Go to Mega Menu > Tools and import the following theme:

{"title":"Pluton","container_background_from":"rgba(255, 255, 255, 0)","container_background_to":"rgba(255, 255, 255, 0)","arrow_up":"dash-f343","arrow_down":"dash-f347","arrow_left":"dash-f341","arrow_right":"dash-f345","menu_item_background_hover_from":"rgba(255, 255, 255, 0)","menu_item_background_hover_to":"rgba(255, 255, 255, 0)","menu_item_link_height":"83px","menu_item_link_color":"rgb(51, 51, 51)","menu_item_link_color_hover":"rgb(19, 175, 240)","menu_item_highlight_current":"on","panel_background_from":"rgb(255, 255, 255)","panel_background_to":"rgb(255, 255, 255)","panel_width":"body","panel_inner_width":".container","panel_border_color":"rgb(19, 175, 240)","panel_border_top":"3px","panel_header_color":"rgb(51, 51, 51)","panel_header_font_size":"15px","panel_header_font_weight":"normal","panel_header_padding_bottom":"0px","panel_header_margin_bottom":"10px","panel_header_border_color":"rgba(0, 0, 0, 0.2)","panel_header_border_bottom":"1px","panel_font_size":"14px","panel_font_color":"rgb(51, 51, 51)","panel_font_family":"inherit","panel_second_level_font_color":"rgb(51, 51, 51)","panel_second_level_font_color_hover":"rgb(51, 51, 51)","panel_second_level_text_transform":"uppercase","panel_second_level_font":"inherit","panel_second_level_font_size":"15px","panel_second_level_font_weight":"normal","panel_second_level_font_weight_hover":"normal","panel_second_level_text_decoration":"none","panel_second_level_text_decoration_hover":"none","panel_second_level_margin_bottom":"10px","panel_second_level_border_color":"rgba(19, 175, 240, 0)","panel_second_level_border_left":"3px","panel_third_level_font_color":"#666","panel_third_level_font_color_hover":"#666","panel_third_level_font":"inherit","panel_third_level_font_size":"14px","flyout_menu_background_from":"rgb(255, 255, 255)","flyout_menu_background_to":"rgb(255, 255, 255)","flyout_border_color":"rgb(19, 175, 240)","flyout_border_top":"3px","flyout_menu_item_divider_color":"rgba(0, 0, 0, 0.1)","flyout_background_from":"rgba(255, 255, 255, 0)","flyout_background_to":"rgba(255, 255, 255, 0)","flyout_background_hover_from":"rgba(0, 0, 0, 0.03)","flyout_background_hover_to":"rgba(0, 0, 0, 0.03)","flyout_link_size":"14px","flyout_link_color":"#666","flyout_link_color_hover":"#666","flyout_link_family":"inherit","responsive_breakpoint":"959px","shadow":"on","shadow_vertical":"2px","transitions":"on","mobile_columns":"1","toggle_background_from":"rgba(255, 255, 255, 0)","toggle_background_to":"rgba(255, 255, 255, 0)","toggle_font_color":"rgb(51, 51, 51)","mobile_background_from":"rgb(225, 225, 225)","mobile_background_to":"rgb(225, 225, 225)","custom_css":"#{$wrap} #{$menu} {\r\n   > li.search-toggle-li,\r\n   > li.woo-menu-icon {\r\n       display: inline-block;\r\n       padding: 0 10px;\r\n   }\r\n}\r\n\r\nheader #site-navigation-wrap {\r\n   margin-top: -43px;\r\n}\r\n\r\n@include mobile {\r\n    #site-logo {\r\n        z-index: 99999;\r\n        position: relative;\r\n    }\r\n    #{$wrap} #{$menu} > li.search-toggle-li,\r\n    #{$wrap} #{$menu} > li.woo-menu-icon {\r\n        display: none;\r\n    }\r\n    header #site-navigation-wrap {\r\n        width: 100%;\r\n        margin-top: -19px;\r\n        right: 0;\r\n    }\r\n    header #pluton-mobile-menu-icon {\r\n        display: none;\r\n    }\r\n}"}

{"title":"Pluton","container_background_from":"rgba(255, 255, 255, 0)","container_background_to":"rgba(255, 255, 255, 0)","arrow_up":"dash-f343","arrow_down":"dash-f347","arrow_left":"dash-f341","arrow_right":"dash-f345","menu_item_background_hover_from":"rgba(255, 255, 255, 0)","menu_item_background_hover_to":"rgba(255, 255, 255, 0)","menu_item_link_height":"83px","menu_item_link_color":"rgb(51, 51, 51)","menu_item_link_color_hover":"rgb(19, 175, 240)","menu_item_highlight_current":"on","panel_background_from":"rgb(255, 255, 255)","panel_background_to":"rgb(255, 255, 255)","panel_width":"body","panel_inner_width":".container","panel_border_color":"rgb(19, 175, 240)","panel_border_top":"3px","panel_header_color":"rgb(51, 51, 51)","panel_header_font_size":"15px","panel_header_font_weight":"normal","panel_header_padding_bottom":"0px","panel_header_margin_bottom":"10px","panel_header_border_color":"rgba(0, 0, 0, 0.2)","panel_header_border_bottom":"1px","panel_font_size":"14px","panel_font_color":"rgb(51, 51, 51)","panel_font_family":"inherit","panel_second_level_font_color":"rgb(51, 51, 51)","panel_second_level_font_color_hover":"rgb(51, 51, 51)","panel_second_level_text_transform":"uppercase","panel_second_level_font":"inherit","panel_second_level_font_size":"15px","panel_second_level_font_weight":"normal","panel_second_level_font_weight_hover":"normal","panel_second_level_text_decoration":"none","panel_second_level_text_decoration_hover":"none","panel_second_level_margin_bottom":"10px","panel_second_level_border_color":"rgba(19, 175, 240, 0)","panel_second_level_border_left":"3px","panel_third_level_font_color":"#666","panel_third_level_font_color_hover":"#666","panel_third_level_font":"inherit","panel_third_level_font_size":"14px","flyout_menu_background_from":"rgb(255, 255, 255)","flyout_menu_background_to":"rgb(255, 255, 255)","flyout_border_color":"rgb(19, 175, 240)","flyout_border_top":"3px","flyout_menu_item_divider_color":"rgba(0, 0, 0, 0.1)","flyout_background_from":"rgba(255, 255, 255, 0)","flyout_background_to":"rgba(255, 255, 255, 0)","flyout_background_hover_from":"rgba(0, 0, 0, 0.03)","flyout_background_hover_to":"rgba(0, 0, 0, 0.03)","flyout_link_size":"14px","flyout_link_color":"#666","flyout_link_color_hover":"#666","flyout_link_family":"inherit","responsive_breakpoint":"959px","shadow":"on","shadow_vertical":"2px","transitions":"on","mobile_columns":"1","toggle_background_from":"rgba(255, 255, 255, 0)","toggle_background_to":"rgba(255, 255, 255, 0)","toggle_font_color":"rgb(51, 51, 51)","mobile_background_from":"rgb(225, 225, 225)","mobile_background_to":"rgb(225, 225, 225)","custom_css":"#{$wrap} #{$menu} {\r\n > li.search-toggle-li,\r\n > li.woo-menu-icon {\r\n display: inline-block;\r\n padding: 0 10px;\r\n }\r\n}\r\n\r\nheader #site-navigation-wrap {\r\n margin-top: -43px;\r\n}\r\n\r\n@include mobile {\r\n #site-logo {\r\n z-index: 99999;\r\n position: relative;\r\n }\r\n #{$wrap} #{$menu} > li.search-toggle-li,\r\n #{$wrap} #{$menu} > li.woo-menu-icon {\r\n display: none;\r\n }\r\n header #site-navigation-wrap {\r\n width: 100%;\r\n margin-top: -19px;\r\n right: 0;\r\n }\r\n header #pluton-mobile-menu-icon {\r\n display: none;\r\n }\r\n}"}

Step 2: Under Appearance > Menus, set the following values in the Max Mega Menu settings: Event: Click Theme: Pluton That’s it! Enjoy using Max…

Mobile Menu Hidden

Posted by Tom Hemsley on July 11, 2016

If you can’t see the mobile menu then it will be due to residual styling. Please check to see if we already have an integration guide for your theme before using the following option. Here is a quick way to ensure your theme does not hide the mobile menu. It should work for…

How to hide the sub menu after a menu item link is clicked

Posted by Tom Hemsley on July 10, 2016

Close desktop menu after click If you are using a one page theme or have anchor links within your sub menus, and want to close the desktop menu as soon as one of the links is clicked: Install the TC Custom JavaScript Plugin Go to Appearance > Custom JavaScript and…

Activello

Posted by Tom Hemsley on July 5, 2016

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

/* Place menu on same line as search box */
@include desktop {
    #{$wrap} {
        float: left;
    }
}

/* Hide duplicate mobile menu button */
.navbar-header {
    display: none !important;
}

/* Place menu on same line as search box */

@include desktop {

#{$wrap} {

float: left;

}

/* Hide duplicate mobile menu button */

.navbar-header {

display: none !important;

}

Menu Items Wrapping onto Two Lines

Posted by Tom Hemsley on June 16, 2016

If the combined width of your top level menu items exceeds the maximum width available for your menu, the items that don’t fit on the top row will be pushed down and start a new row. The behaviour of the menu can be compared to a standard paragraph of text (like this one)….

Footer Mega Menu

Posted by Tom Hemsley on June 16, 2016

To make the sub menus for your mega menu appear above the menu bar instead of below, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

@include desktop {
    /* Invert sub menu */
    #{$wrap} #{$menu} li.mega-menu-item > ul.mega-sub-menu {
        bottom: $menu_item_link_height;
    }
    #{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
        bottom: 0;
        top: auto;
    }
}

@include desktop {

/* Invert sub menu */

#{$wrap} #{$menu} li.mega-menu-item > ul.mega-sub-menu {

bottom: $menu_item_link_height;

}

#{$wrap} #{$menu} > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {

bottom: 0;

top: auto;

}

Tip: If you want the sub menu indicator to point upwards instead of downwards, go to…

West

Posted by Tom Hemsley on June 6, 2016

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

@media only screen and (max-width: 1024px) {
    .site-header .container {
        display: block !important;
    }
    .main-navigation {
    	display: flex !important;
    	width: 100%;
    	margin-top: 20px;
    	padding-left: 0;
    	float: left;
    }
    #{$wrap} {
    	width: 100% !important;
    }
}

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

.site-header .container {

display: block !important;

}

.main-navigation {

display: flex !important;

width: 100%;

margin-top: 20px;

padding-left: 0;

float: left;

}

#{$wrap} {

width: 100% !important;

}

Colormag

Posted by Tom Hemsley on June 6, 2016

Remove duplicate mobile toggle button and fix residual styling Add the following to the functions.php file of your child theme.

function colormag_below_header_bar_display() {
	?>
	<nav id="site-navigation">
		<div class="inner-wrap clearfix">
			<?php wp_nav_menu( array( 'theme_location'  => 'primary' ) ); ?>
		</div>
	</nav>
	<?php
}

function colormag_below_header_bar_display() {

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

</div>

</nav>

<?php

}

Yamen

Posted by Tom Hemsley on May 18, 2016

Using an FTP client, edit the following file on your server: wp-content/themes/yamen/templates/header/default.php Find (line 33):

 <div class="Menu-Header top-menu">

1	<div class="Menu-Header top-menu">

Replace with:

 <div class="">

1	<div class="">

Lava (YooThemes)

Posted by Tom Hemsley on May 15, 2016

Under Appearance > Editor, select ‘theme.php (layouts/theme.php)’ on the right. Find (line 49):

<?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' ) ); ?>