{"id":7928,"date":"2015-11-19T12:05:52","date_gmt":"2015-11-19T12:05:52","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/faqs\/theme-integration\/cerise-2\/"},"modified":"2020-03-27T16:11:26","modified_gmt":"2020-03-27T16:11:26","slug":"flatsome","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/flatsome\/","title":{"rendered":"Flatsome"},"content":{"rendered":"<p>Under <em>Appearance &gt; Menus<\/em>, tag your main menu to both the &#8216;Main Menu&#8217; and &#8216;Main Menu &#8211; Mobile&#8217; Location.<\/p>\n<p>Enable Max Mega Menu for the Main Menu location (but <em>not<\/em> the &#8216;Main Menu &#8211; Mobile&#8217; Location &#8211; we will let the theme manage the mobile menu).<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7930\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2.png\" alt=\"flatsome-2\" width=\"1183\" height=\"685\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2.png 1183w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2-300x174.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2-1024x593.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2-125x72.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-2-75x43.png 75w\" sizes=\"auto, (max-width: 1183px) 100vw, 1183px\" \/><\/a><\/p>\n<p>Under <em>Mega Menu &gt; Menu Themes<\/em>, apply the following settings (these are the important settings, others can be adjusted to your own requirements).<\/p>\n<ul>\n<li><strong>Menu Bar &gt; Menu Background:<\/strong> Transparent<\/li>\n<li><strong>Menu Bar &gt; Top Level Menu Items &gt; Font:<\/strong> Black<\/li>\n<li><strong>Menu Bar &gt; Menu Height:<\/strong> 50px<\/li>\n<li><strong>Mega Menu &gt; Panel Width (outer):<\/strong> try\u00a0<span class=\"lang:default decode:true crayon-inline \">.header-inner<\/span> OR <span class=\"lang:default decode:true crayon-inline\">.row<\/span>*<\/li>\n<li><strong>Mobile Menu &gt; Responsive Breakpoint:<\/strong> 48em<\/li>\n<\/ul>\n<p>For <strong>full width<\/strong> mega sub menus, apply the following:<\/p>\n<ul>\n<li><strong>Mega Menu &gt; Panel Width (outer):<\/strong> body<\/li>\n<li><strong>Mega Menu &gt; Panel Width (outer):<\/strong> try\u00a0<span class=\"lang:default decode:true crayon-inline \">.header-inner<\/span> OR <span class=\"lang:default decode:true crayon-inline \">.row<\/span>*<\/li>\n<\/ul>\n<p><em>* This setting will depend on your theme setup, try each one and decide which you prefer<\/em><\/p>\n<p>After updating the theme settings, your menu should look something like this on desktop:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7931\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1.png\" alt=\"flatsome-1\" width=\"1183\" height=\"685\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1.png 1183w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1-300x174.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1-1024x593.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1-125x72.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-1-75x43.png 75w\" sizes=\"auto, (max-width: 1183px) 100vw, 1183px\" \/><\/a><\/p>\n<p>&#8230; and something like this on mobile (the default theme mobile menu):<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-mobile.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7934\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/11\/flatsome-mobile.gif\" alt=\"flatsome-mobile\" width=\"664\" height=\"684\" \/><\/a><\/p>\n<h3>Using the Max Mega Menu mobile menu<\/h3>\n<p>If you would prefer to use the Max Mega Menu mobile menu, use the <a href=\"https:\/\/flatsome3.uxthemes.com\/features\/header-designer\/\">Flatsome Header Designer<\/a>.<\/p>\n<p>Switch to the Mobile\/Tablet view and remove the default &#8216;Nav Icon&#8217; block from the mobile header. Replace this with a 100% wide HTML block (on a <strong>new<\/strong> row below the logo, <strong>not<\/strong> on the same row as the logo) that contains the menu shortcode:<\/p>\n<pre class=\"lang:default decode:true \"><!-- menu not found [maxmegamenu] --><\/pre>\n<p>You may wish to go to <em>Appearance &gt; Menus &gt; Max Mega Menu Settings<\/em> and switch the &#8220;Effect &#8211; Mobile&#8221; to one of the Off Canvas options.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Under Appearance &gt; Menus, tag your main menu to both the &#8216;Main Menu&#8217; and &#8216;Main Menu &#8211; Mobile&#8217; Location. Enable Max Mega Menu for the Main Menu location (but not the &#8216;Main Menu &#8211; Mobile&#8217; Location &#8211; we will let the theme manage the mobile menu). Under Mega Menu &gt;&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[15],"ht-kb-tag":[],"class_list":["post-7928","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":"Under Appearance &gt; Menus, tag your main menu to both the &#8216;Main Menu&#8217; and &#8216;Main Menu &#8211; Mobile&#8217; Location. Enable Max Mega Menu for the Main Menu location (but not the &#8216;Main Menu &#8211; Mobile&#8217; Location &#8211; we will let the theme manage the mobile menu). Under Mega Menu &gt;...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/7928","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=7928"}],"version-history":[{"count":17,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/7928\/revisions"}],"predecessor-version":[{"id":237422,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/7928\/revisions\/237422"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=7928"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=7928"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=7928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}