Shopkeeper
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 of the menu items when the theme header becomes sticky, go to Mega Menu > Menu Themes. In the Custom Styling area, add:
|
1 2 3 4 5 |
/* Reduce height of menu when header is sticky */ .sticky #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link { height: 33px; line-height: 33px; } |
Change the color of the menu item links when the header is sticky
Depending on your theme setup, the background color of the sticky menu may match the font color of the menu items, making the links impossible to see when the header is stuck. To change the color of the menu items when the menu is stuck, go to Mega Menu > Menu Themes. In the Custom Styling area, add:
|
1 2 3 |
.sticky #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link { color: red; } |
Align Menu With Logo
If your menu is appearing below the logo, and you want to align it alongside the logo, go to Mega Menu > Menu Themes. In the Custom Styling area, delete:
|
1 2 3 4 |
/** Push menu onto new line **/ #{$wrap} { clear: both; } |
Make “Site Tools” Accessible
The menu will overlap the site tools in the header (Search icon, WooCommerce icon etc). To make them accessible, go to Mega Menu > Menu Themes and paste the following into the Custom Styling area:
|
1 2 3 4 5 |
/* Position site-tools above menu */ .site-tools { position: relative; z-index: 999999; } |
Fix Residual Styling Issues
Shopkeeper uses “!important” CSS to set the color of links within sub menus. This “!important” CSS will take precedence over the styling you have set in the Theme Editor, and, for example, will always set the font color to black.
To stop Shopkeeper from being able to apply it’s own styling to Max Mega Menu, go to Appearance > Customize > Additional JS and add the following to the Footer JavaScript Code area:
|
1 2 3 4 5 |
<script> (function($) { $(".main-navigation").removeClass("main-navigation"); })( jQuery ); </script> |
To restore the alignment of the menu, go to Appearance > Customize > Additional CSS and add the following:
|
1 2 3 4 5 |
.top-headers-wrapper .site-header.default .site-header-wrapper .menu-wrapper .default-navigation { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } |
Remove gaps from either side of menu
Depending on the chosen color for your site background and menu background, you may see a 20px gap to the left and right of the menu. To remove this gap, go to Mega Menu > Menu Themes and paste the following into the Custom CSS area:
|
1 2 3 4 5 6 |
@include desktop { #{$wrap} { margin-left: -20px; margin-right: -20px; } } |
Mobile Menu
Shopkeeper displays it’s own Mobile Menu in a slide out panel to the right. The Max Mega Menu mobile menu is not compatible with Shopkeeper, so to disable it (and use the Shopkeeper mobile menu instead), go to Mega Menu > Menu Locations > Main Navigation. In the Advanced tab set the “Active Menu Instance” to 2.