Avada
Under Appearance > Theme Options > Menu, uncheck “Display Search Icon in Main Nav”.
Fix Mobile Menu
Only use this option if you want to display your desktop menu on mobiles too. If you are using the Avada “Mobile Navigation” location, and want to display the Avada Mobile Menu on mobiles, skip this step.
To hide the default Avada mobile menu, and show the Max Mega Menu mobile menu instead, go to Appearance > Customize > Additional CSS and enter the following:
|
1 2 3 4 5 6 7 |
.fusion-main-menu:not(.fusion-sticky-menu) { display: block !important; } .fusion-mobile-selector, .fusion-mobile-menu-icons { display: none !important; } |
Fix “Click” Event
The sub menus will automatically close when the event is set to “Click” (which should not happen until the user has clicked away from the menu). To fix this conflict go to Appearance > Customize > Additional CSS and enter the following:
|
1 2 3 |
.fusion-main-menu { overflow: visible !important; } |
Compatibility with the “Mobile Navigation” location
If you are making use of the Avada “Mobile Navigation” menu location, enabling Max Mega Menu will have the affect of revealing that menu on desktops as well as mobiles, or vice versa. To fix it, go to Appearance > Customize > Additional CSS and enter the following:
|
1 2 3 4 5 6 7 8 9 10 |
@media only screen and (min-width: 801px) { body #mega-menu-wrap-mobile_navigation { display: none; } } @media only screen and (max-width: 801px) { body #mega-menu-wrap-main_navigation { display: none; } } |
Show menu to right of logo
To move the menu to the right of the logo, go to Mega Menu > Menu Themes and enter the following into the Custom Styling area:
|
1 2 3 4 5 |
@include desktop { #{$wrap} { float: right; } } |
Hide theme logo
To hide the theme logo (so you can use the Max Mega Menu Logo option instead), go to Appearance > Theme Options > Custom CSS and enter the following:
|
1 2 3 |
body.mega-menu-main-navigation .fusion-logo { display: none !important; } |
Full width desktop menu
If you have hidden the theme logo, and your menu items are still positioned to the right hand side of the header, go to Appearance > Theme Options > Custom CSS and enter the following:
|
1 2 3 |
body.mega-menu-main-navigation .fusion-main-menu { float: none; } |
Fix Sticky Menu on Desktop
If the MMM sticky menu option is not working, go to Appearance > Theme Options > Custom CSS and enter the following:
|
1 2 3 |
header.fusion-header-wrapper .fusion-header { -webkit-transform: none !important; } |
Fix Sticky Menu on iOS
If you find the sticky menu works on Android devices, but not iOS, go to Appearance > Theme Options > Custom CSS and enter the following:
|
1 2 3 |
body.mega-menu-main-navigation .fusion-main-menu { overflow: visible; } |
Shrink Menu When Header is Sticky
If you have configured Avada to shrink the header when it becomes sticky, you will find the menu overflows the header area (as it will remain its original height). To shrink the menu when the header becomes sticky, go to Mega Menu > Menu Themes > Custom Styling and add the following:
|
1 2 3 4 |
header.fusion-is-sticky #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link { height: 67px; line-height: 67px; } |