{"id":8083,"date":"2021-03-15T10:51:12","date_gmt":"2021-03-15T09:51:12","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?post_type=faq&#038;p=8083"},"modified":"2021-03-15T11:01:56","modified_gmt":"2021-03-15T10:01:56","slug":"mega-menu-in-wordpress","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/en\/knowledge-base\/faq\/mega-menu-in-wordpress\/","title":{"rendered":"How to create a mega menu in WordPress"},"content":{"rendered":"<div class=\"row\"  id=\"row-11754370\">\n\n\t<div id=\"col-944600497\" class=\"col medium-9 small-12 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>In all our WordPress themes you have the possibility to create mega menus. In general Mega menus should be used when you have more than 3 menu levels. This improves usability and makes it easier for your customers to find correct information.<\/p>\n<ol>\n<li>Go to Admin &gt; Appearance &gt; Menus<\/li>\n<li>Create menu items like usal<\/li>\n<li>In the first level add CSS class &#8220;mega-menu&#8221;*<\/li>\n<li>In the next level add col-3 (or any other number)<\/li>\n<\/ol>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-922764000\" class=\"col medium-3 small-12 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_290355965\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"1024\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-597x1024.png\" class=\"attachment-large size-large\" alt=\"WordPress mega menu example\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-597x1024.png 597w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-247x424.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-510x875.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-175x300.png 175w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-768x1317.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example-895x1536.png 895w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wordpress-mega-menu-example.png 984w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_290355965 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-410704490\">\n\n\t<div id=\"col-2120260034\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>* If you can not see the CSS class text field click top right <strong>screen options<\/strong>. Then enable CSS Classes&#8221; by enabling the checkbox.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_567351215\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"251\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-1024x252.png\" class=\"attachment-large size-large\" alt=\"wp menu screen options to see css class\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-1024x252.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-247x61.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-510x126.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-300x74.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-768x189.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-1536x379.png 1536w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/wp-menu-screen-options-to-see-css-class-2048x505.png 2048w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_567351215 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t<div id=\"gap-146003831\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-146003831 {\n  padding-top: 50px;\n}\n<\/style>\n\t<\/div>\n\t\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","product_cat":[],"class_list":["post-8083","faq","type-faq","status-publish","hentry","faq_topics-strand","faq_topics-strand-faqs"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/8083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/faq"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=8083"}],"version-history":[{"count":4,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/8083\/revisions"}],"predecessor-version":[{"id":8093,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/8083\/revisions\/8093"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=8083"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/product_cat?post=8083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}