{"id":78,"date":"2014-07-13T11:26:28","date_gmt":"2014-07-13T11:26:28","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=78"},"modified":"2017-05-30T16:11:09","modified_gmt":"2017-05-30T15:11:09","slug":"removing-residual-styling","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/removing-residual-styling\/","title":{"rendered":"Removing Residual Styling"},"content":{"rendered":"<blockquote><p>Check the <a title=\"Theme Integration\" href=\"\/articles\/theme-integration\/\">Theme Integration<\/a>\u00a0page to see if we&#8217;ve already written instructions on how to integrate Max Mega Menu with your theme.<\/p><\/blockquote>\n<h3>What is Residual Styling?<\/h3>\n<p>Residual styling is the term used for any styling which has been left over from your existing theme menu and is now being applied to your Max Mega Menu enabled menu.<\/p>\n<p>Max Mega Menu attempts to reset as much CSS as it can in order to minimize the effects of residual styling, but depending on how your theme has been created these resets might not be enough.<\/p>\n<h3>Why does it happen?<\/h3>\n<p>When you install Max Mega Menu and replace an existing menu with a mega menu, your theme is blissfully unaware that the menu it expects to be displayed is no longer there, and will continue to try and apply it&#8217;s own styling and functionality to Max Mega Menu. This causes conflicts between your theme and the plugin.<\/p>\n<p>Residual styling becomes a problem when:<\/p>\n<ul>\n<li>Your menu is wrapped in other HTML elements, and your theme&#8217;s menu CSS has been applied to those wrappers instead of the root menu itself.<\/li>\n<li>Your theme uses <em>!important<\/em> CSS rules.\u00a0These rules will <em>always<\/em> take priority and be applied to your menu.<\/li>\n<\/ul>\n<h3>What are the effects?<\/h3>\n<p>The effect of residual styling can be wide ranging, but might include:<\/p>\n<ul>\n<li>The menu not looking correct on mobile devices<\/li>\n<li>The menu being completely hidden on mobile devices<\/li>\n<li>Menu panels always displaying on hover, even when the event has been set to &#8216;click&#8217;.<\/li>\n<li>Menu, sub menu, text etc alignment is incorrect.<\/li>\n<li>Colours in the menu are different to\u00a0the colours specified in the menu theme.<\/li>\n<\/ul>\n<h3>How to remove residual styling from your menu<\/h3>\n<p><strong>Make a backup before editing any files. Make any changes inside a Child Theme.<\/strong><\/p>\n<p>The <strong>example<\/strong> below is from the TwentyTwelve theme, but the same steps can be applied to most themes. In some themes you may need to work out where the menu is being output and edit those files instead.<\/p>\n<p><span style=\"color: #008000;\"><strong>The only line needed in your theme for Max Mega Menu to work is the one that contains &#8216;wp_nav_menu&#8217;. The only requirement of the wp_nav_menu call is that it specifies the &#8216;theme_location&#8217; parameter.<\/strong><\/span><\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2014\/07\/remove-residual-styling.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-485\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2014\/07\/remove-residual-styling.png\" alt=\"remove-residual-styling\" width=\"1239\" height=\"603\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2014\/07\/remove-residual-styling.png 1239w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2014\/07\/remove-residual-styling-300x146.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2014\/07\/remove-residual-styling-1024x498.png 1024w\" sizes=\"auto, (max-width: 1239px) 100vw, 1239px\" \/><\/a><\/p>\n<p>Removing the highlighted lines above will stop any CSS using the &#8216;#site-navigation&#8217; selector from being applied to the menu.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check the Theme Integration\u00a0page to see if we&#8217;ve already written instructions on how to integrate Max Mega Menu with your theme. What is Residual Styling? Residual styling is the term used for any styling which has been left over from your existing theme menu and is now being applied to&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-78","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"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":"Check the Theme Integration\u00a0page to see if we&#8217;ve already written instructions on how to integrate Max Mega Menu with your theme. What is Residual Styling? Residual styling is the term used for any styling which has been left over from your existing theme menu and is now being applied to...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/78","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=78"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/78\/revisions"}],"predecessor-version":[{"id":115006,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/78\/revisions\/115006"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=78"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}