Storefront
To integrate Max Mega Menu with the WooCommerce StoreFront theme go to Plugins > Add New and search for Max Mega Menu – StoreFront Integration.
The StoreFront integration plugin will fix the square icons seen before each menu item, and add a new “StoreFront” menu theme which is pre-styled to replicate the StoreFront theme styling.
The mobile/handheld menu
On mobile the StoreFront menu will also be removed and replaced with the Max Mega Menu mobile menu.
You will always see the the Primary Menu (the Mobile Menu location will be ignored as it is not compatible with MMM). If you want to, for example, not show a menu item in the mobile menu (but still display it in the desktop menu), you can use the “Hide on mobile” option for that menu item. Likewise, if you want to show a menu item in the mobile menu (but not on desktop), you can use the “Hide on desktop” option. Using these options you can essentially have one set of items that display only on mobile, and another set that only display on desktop (and some that display on both).
The sticky menu
If you upgrade to Pro in order to access the sticky menu functionality, please note that only the menu itself will be stuck. The mini cart, to the right of the menu, is part of the theme (not the menu) and therefore will not be stuck.
Change menu row background color
Note to StoreFront Powerpack users: If you are using the Header Customizer functionality in StoreFront PowerPack the following CSS will not work. The menu does not sit in it’s own row, therefore it’s impossible to change the background of the menu “row” without changing the background color for the whole header. You will need to set the background of the menu to transparent or the same color as your theme header so that the menu blends into the header.
Standard StoreFront users:
The StoreFront menu does not span the full width of the page. The background color of the menu will only apply to the menu itself – not the full width of the row that the menu is displayed within.
To apply the same menu background color to the row that holds the menu, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:
|
1 2 3 4 5 |
@media (min-width: 768px) { header .storefront-primary-navigation { @include background($container_background_from, $container_background_to); } } |
PootlePress StoreFront Pro
If you are using StoreFront Pro by PootlePress, you should enable the “Remove search icon from nav” option under Appearance > Customize > Header and Navigation > Primary Navigation.
Making the menu full width
By default the menu will be 73% wide (to allow a space on the right hand side of the menu for the cart element). If you have removed the cart element either manually or by using a plugin, you can use the following CSS to make the menu 100% wide:
|
1 2 3 |
#mega-menu-wrap-primary { width: 100% !important; } |