Tom Hemsley – Page 19 – Max Mega Menu

Shopkeeper

Posted by Tom Hemsley on January 3, 2017

Basic Menu Theme Setup To match the Mega Menu theme with Shopkeeper, go to Mega Menu > Menu Themes and set the following: Menu Bar > Menu Background: transparent Menu Bar > Menu Item Background: transparent Menu Bar > Menu Height: 46px Reduce Height of Sticky Menu To reduce the height…

Grus

Posted by Tom Hemsley on December 31, 2016

Incorrectly positioned sub menu arrows To restore the correct position of the sub menu arrows, go to Appearance > Customize > Additional CSS and enter the following:

a.mega-menu-link:after {
    position: relative;
    height: auto;
    width: auto;
    background: transparent;
    left: auto;
    bottom: auto;
}

a.mega-menu-link:after {

position: relative;

height: auto;

width: auto;

background: transparent;

left: auto;

bottom: auto;

}

Mobile Menu Grus displays it’s mobile menu in a slide out container. The slide out mobile menu starts appearing at 768px. To…

Genesis Framework

Posted by Tom Hemsley on December 29, 2016

Unlike other themes, Genesis is a “Framework” with multiple child themes available. Each child theme can change the menu behaviour, so there is no single guide on how to get Max Mega Menu working with all Genesis themes. This page will be updated as more users request integration instructions for Genesis…

Welfare

Posted by Tom Hemsley on December 29, 2016

Step 1 – Theme Setup The following instructions apply when the Theme Settings > General > Header > Header Styles option is set to “Default”. Step 2 – Fix Mobile Menu This step will explain how to restore the default Max Mega Menu mobile menu. Copy the parent theme header.php file…

How to change the direction of Flyout Menus

Posted by Tom Hemsley on December 28, 2016

By default, “flyout” sub menus are aligned to the left edge of the parent item, and expand to the right of the screen: To change the direction of the sub menu, go to Appearance > Menus and hover over the parent item of the sub menu (in our case it is…

How to display shortcodes in menu items

Posted by Tom Hemsley on December 26, 2016

Please note this guide uses the “Replacements” functionality which is a feature of Max Mega Menu Pro. In this example we will demonstrate how to display a shortcode alongside existing top level menu items. For the purposes of this demonstration, we’ll use the [currency_switcher] shortcode. This shortcode is available if you…

RTL Support

Posted by Tom Hemsley on December 26, 2016

To add support for RTL language/direction, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

.rtl {
    #{$wrap} {
        direction: ltr;
    }
    #{$wrap} #{$menu} {
        direction: rtl;
        text-align: right;
        
        p {
            text-align: right;
        }
 
        li.mega-menu-item a.mega-menu-link:before {
            margin: 0 0 0 6px;
        }
        
        li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
            float: left;
            
            &:after {
                margin: 0 6px 0 0;
            }
        }
        
        > li.mega-menu-item > a.mega-menu-link,
        ul.mega-sub-menu a.mega-menu-link,
        ul.mega-sub-menu h4.mega-block-title,
        li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
            text-align: right;
        }
 
         > li.mega-menu-tabbed > ul.mega-sub-menu {
            > li.mega-menu-item > ul.mega-sub-menu {
                left: 0;
            }
 
            > li.mega-menu-item > a.mega-menu-link {
                float: right;
            }
 
            > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
                float: left;

                &:after {
                    content: $arrow_left;
                }
            }
        }
 
        > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
            float: right;
        }
 
        li.mega-menu-item-has-children li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator,
        &.mega-menu-accordion > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
            float: left;
        }
    }
}

.rtl {

#{$wrap} {

direction: ltr;

}

#{$wrap} #{$menu} {

direction: rtl;

text-align: right;

p {

text-align: right;

}

li.mega-menu-item a.mega-menu-link:before {

margin: 0 0 0 6px;

}

li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {

float: left;

&:after {

margin: 0 6px 0 0;

}

> li.mega-menu-item > a.mega-menu-link,

ul.mega-sub-menu a.mega-menu-link,

ul.mega-sub-menu h4.mega-block-title,

li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {

text-align: right;

}

> li.mega-menu-tabbed > ul.mega-sub-menu {

> li.mega-menu-item > ul.mega-sub-menu {

left: 0;

}

> li.mega-menu-item > a.mega-menu-link {

float: right;

}

> li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {

float: left;

&:after {

content: $arrow_left;

}

> li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {

float: right;

}

li.mega-menu-item-has-children li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator,

&.mega-menu-accordion > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {

float: left;

}

SKT White

Posted by Tom Hemsley on December 25, 2016

Step 1 -Mobile Menu This step will explain how to restore the default Max Mega Menu mobile menu and fix some residual styling which is present within the mobile menu. Copy the parent theme header.php file to your child theme. In the child theme header.php file, Find (~line 74):

<div class="toggle">
<a class="toggleMenu" href="#"><?php _e('Menu','skt-white'); ?></a>
</div><!-- toggle -->
<div class="nav">

</div>

…

Creating multilingual mega menus with PolyLang

Posted by Tom Hemsley on December 21, 2016

With Max Mega Menu and PolyLang you can create multilingual Mega Menus for your WordPress site. Step 1 In this step we assume you haven’t installed PolyLang yet, but you’ve already set up a menu in your native language and enabled Max Mega Menu for it. Here is how the menu looks…

The Sticky Menu is not working

Posted by Tom Hemsley on December 21, 2016

The most common reason for the sticky menu not to work is due to JavaScript errors on your page. For more information on how to detect and fix JavaScript errors, please see this page: JavaScript Errors The Sticky Menu can also conflict if your theme has built in “Sticky header”…