To match the Mega Menu theme with Shopkeeper, go to Mega Menu > Menu Themes\u00a0<\/em>and set the following:<\/p>\n Menu Bar > Menu Background: transparent<\/strong> To reduce the height of the menu items when the theme header becomes sticky, go to Mega Menu > Menu Themes<\/em>. In the Custom Styling area, add:<\/p>\n 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<\/em>.\u00a0In the Custom Styling area, add:<\/p>\n If your menu is appearing below the logo, and you want to align it alongside the logo, go to Mega Menu > Menu Themes<\/em>. In the Custom Styling area, delete:<\/p>\n 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:<\/p>\n 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.<\/p>\n To stop Shopkeeper from being able to apply it’s own styling to Max Mega Menu, go to Appearance > Customize > Additional JS<\/em> and add the following to the Footer<\/strong> JavaScript Code area:<\/p>\n To restore the alignment of the menu, go to Appearance > Customize > Additional CSS<\/em> and add the following:<\/p>\n 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<\/em> and paste the following into the Custom CSS area:<\/p>\n 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.<\/em> In the Advanced tab set the “Active Menu Instance” to 2.<\/p>\n","protected":false},"excerpt":{"rendered":" Basic Menu Theme Setup To match the Mega Menu theme with Shopkeeper, go to Mega Menu > Menu Themes\u00a0and 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…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[15],"ht-kb-tag":[],"class_list":["post-100097","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-theme-integration"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"Basic Menu Theme Setup To match the Mega Menu theme with Shopkeeper, go to Mega Menu > Menu Themes\u00a0and 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...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/100097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=100097"}],"version-history":[{"count":22,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/100097\/revisions"}],"predecessor-version":[{"id":262759,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/100097\/revisions\/262759"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=100097"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=100097"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=100097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nMenu Bar > Menu Item Background: transparent<\/strong>
\nMenu Bar > Menu Height: 46px<\/p>\nReduce Height of Sticky Menu<\/h3>\n
\/* Reduce height of menu when header is sticky *\/\r\n.sticky #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {\r\n height: 33px;\r\n line-height: 33px;\r\n}<\/pre>\nChange the color of the menu item links when the header is sticky<\/h3>\n
.sticky #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {\r\n color: red;\r\n}<\/pre>\nAlign Menu With Logo<\/h3>\n
\/** Push menu onto new line **\/\r\n#{$wrap} {\r\n clear: both;\r\n}<\/pre>\nMake “Site Tools” Accessible<\/h3>\n
\/* Position site-tools above menu *\/\r\n.site-tools {\r\n position: relative;\r\n z-index: 999999;\r\n}<\/pre>\nFix\u00a0Residual Styling Issues<\/h3>\n
<script>\r\n(function($) {\r\n $(\".main-navigation\").removeClass(\"main-navigation\");\t\r\n})( jQuery );\r\n<\/script><\/pre>\n.top-headers-wrapper .site-header.default .site-header-wrapper .menu-wrapper .default-navigation {\r\n -webkit-box-flex: 1;\r\n -ms-flex: auto;\r\n flex: auto;\r\n}<\/pre>\nRemove gaps from either side of menu<\/h3>\n
@include desktop {\r\n #{$wrap} {\r\n margin-left: -20px;\r\n margin-right: -20px;\r\n }\r\n}\r\n\r\n<\/pre>\nMobile Menu<\/h3>\n