{"id":323,"date":"2015-03-12T16:19:36","date_gmt":"2015-03-12T16:19:36","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=323"},"modified":"2019-09-19T14:48:37","modified_gmt":"2019-09-19T13:48:37","slug":"theme-editor","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/theme-editor\/","title":{"rendered":"Menu Styling"},"content":{"rendered":"<p>Under <em>Mega Menu &gt; Menu Themes<\/em>\u00a0you&#8217;ll find a theme editor which allows you to edit the appearance of your menus. Max Mega Menu has\u00a0one\u00a0built in theme (Default)\u00a0but\u00a0you can create your\u00a0own themes.<\/p>\n<p>The Theme Editor will let you modify all aspects of the Menu styling, including the font,\u00a0color and size (height) of your menu(s).<\/p>\n<h3>Creating a new theme<\/h3>\n<p>To create a new theme, go to <em>Mega Menu &gt; Menu Themes<\/em>\u00a0and click the &#8216;Create a new theme&#8217; link\u00a0(or alternatively, scroll to the bottom of the page and click &#8216;Duplicate Theme&#8217;). Make any adjustments and click the save button.<\/p>\n<h3>Applying a theme to a menu<\/h3>\n<p>To apply your new theme to a menu, you will need to go back to <em>Appearance &gt; Menus<\/em>, and select your new theme from the &#8216;Theme&#8217; dropdown in the Mega Menu Settings.<\/p>\n<h3>Using the Theme Editor<\/h3>\n<p>The theme editor is split into 6 different tabs:<\/p>\n<div style=\"width: 1322px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-323-1\" width=\"1322\" height=\"844\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/theme-editor.mp4?_=1\" \/><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/theme-editor.mp4\">https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/theme-editor.mp4<\/a><\/video><\/div>\n<p>Descriptions of each setting can be found on the theme editor page.<\/p>\n<h4>General Settings<\/h4>\n<p>These settings change the overall behaviour of the menu, or affect multiple aspects of the menu. For example, enabling Hover Transitions will apply a hover effect to the Menu Bar links, links inside Mega Menus and links inside Flyout Menus.<\/p>\n<h4>Menu Bar<\/h4>\n<p>These settings alter\u00a0the style\u00a0of the top menu bar and the menu items found within the top menu bar.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-132145\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar.png\" alt=\"\" width=\"1764\" height=\"126\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar.png 1764w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar-300x21.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar-768x55.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar-1024x73.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/menu-bar-50x4.png 50w\" sizes=\"auto, (max-width: 1764px) 100vw, 1764px\" \/><\/a><\/p>\n<h4>Mega Menus<\/h4>\n<p>Use these settings to change the appearance of\u00a0&#8220;mega menu&#8221; sub menus and their contents.<\/p>\n<p>Related: We have an article explaining\u00a0<a href=\"https:\/\/www.megamenu.com\/documentation\/adjust-sub-menu-width\/\">how to change the width of a mega menu<\/a>.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-132146\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus.png\" alt=\"\" width=\"1772\" height=\"1100\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus.png 1772w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus-300x186.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus-768x477.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus-1024x636.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mega-menus-50x31.png 50w\" sizes=\"auto, (max-width: 1772px) 100vw, 1772px\" \/><\/a><\/p>\n<h4>Flyout Menus<\/h4>\n<p>Use these settings to change the appearance of &#8220;flyout&#8221; sub menus and the menu items within the flyout menu.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-132147\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu.png\" alt=\"\" width=\"1770\" height=\"540\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu.png 1770w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu-300x92.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu-768x234.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu-1024x312.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/flyout-menu-50x15.png 50w\" sizes=\"auto, (max-width: 1770px) 100vw, 1770px\" \/><\/a><\/p>\n<h4>Mobile Menu<\/h4>\n<p>These settings apply to the menu when it is viewed on mobile (i.e. when the screen width is below the Responsive Breakpoint width).<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-132148\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu.png\" alt=\"\" width=\"1262\" height=\"670\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu.png 1262w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu-300x159.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu-768x408.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu-1024x544.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/11\/mobile-menu-50x27.png 50w\" sizes=\"auto, (max-width: 1262px) 100vw, 1262px\" \/><\/a><\/p>\n<h4>Custom Styling<\/h4>\n<p>You can enter your own menu styling into the Custom CSS editor. This CSS will be compiled along with the theme settings whenever the theme is saved.<\/p>\n<h3>Theme Editor Screenshot<\/h3>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/theme-editor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-107213\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/theme-editor.png\" alt=\"\" width=\"2798\" height=\"2082\" \/><\/a><\/p>\n<p>We have come to the end of our quick overview of Max Mega Menu. If you are looking for more features we also have a <a href=\"https:\/\/www.megamenu.com\/upgrade\/\">Pro addon<\/a> which enables functionality including <a href=\"https:\/\/www.megamenu.com\/documentation\/accordion\/\">accordion menus<\/a>, <a href=\"https:\/\/www.megamenu.com\/documentation\/menu-logo\/\">menu logos<\/a>, <a href=\"https:\/\/www.megamenu.com\/documentation\/search-box\/\">search boxes<\/a> and <a href=\"https:\/\/www.megamenu.com\/features\/\">lots more<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Under Mega Menu &gt; Menu Themes\u00a0you&#8217;ll find a theme editor which allows you to edit the appearance of your menus. Max Mega Menu has\u00a0one\u00a0built in theme (Default)\u00a0but\u00a0you can create your\u00a0own themes. The Theme Editor will let you modify all aspects of the Menu styling, including the font,\u00a0color and size (height)&#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":[13],"ht-kb-tag":[],"class_list":["post-323","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-getting-started"],"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 Mega Menu &gt; Menu Themes\u00a0you&#8217;ll find a theme editor which allows you to edit the appearance of your menus. Max Mega Menu has\u00a0one\u00a0built in theme (Default)\u00a0but\u00a0you can create your\u00a0own themes. The Theme Editor will let you modify all aspects of the Menu styling, including the font,\u00a0color and size (height)...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/323","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=323"}],"version-history":[{"count":9,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/323\/revisions"}],"predecessor-version":[{"id":213724,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/323\/revisions\/213724"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=323"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=323"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}