{"id":3364,"date":"2020-07-23T16:04:12","date_gmt":"2020-07-23T16:04:12","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=3364"},"modified":"2022-11-30T23:18:51","modified_gmt":"2022-11-30T23:18:51","slug":"how-to-create-menus","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/","title":{"rendered":"How to create Menus"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row pix_particles_check=&#8221;&#8221;][vc_column][vc_column_text]You can create or edit your menu in <strong>Essentials<\/strong> easily within the <strong>default WordPress menus <\/strong>page:<\/p>\n<ul>\n<li><strong>WordPress Admin Panel &gt; Appearance &gt; Menus<\/strong><\/li>\n<\/ul>\n<p><strong>Essentials<\/strong> comes with two types of menu layouts:<\/p>\n<ol>\n<li>The <strong>Default drop down menu<\/strong>,<\/li>\n<li>And the <strong>Mega menu<\/strong> layout which extended to fit the page container width which can include more complex styles (for example: banners, columns,&#8230;).<\/li>\n<\/ol>\n<p>After creating the menus, they can be used in any website header (desktop or mobile or both) via the <strong>Header Builder<\/strong>, for more information on creating website header you can check <strong><a href=\"https:\/\/essentials.pixfort.com\/knowledge-base\/creating-website-header\/\">this article<\/a><\/strong>.[\/vc_column_text][vc_separator]<div id=\"1607081597440-0f183522-8e4b\" class=\"pix-feature-el  media \"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">1<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Default Drop Down Menu<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div>[vc_column_text]Default drop down menus are easy to build in WordPress, to create one just open your admin panel to the Menus page (Under Appearance tab in the left sidebar), then choose from the left area of the menu builder the elements that you want to add into the menu (for example: Pages, Posts, Categories, Custom links,&#8230;). After that, you can drag and drop the elements inside the menu to sort them, and to create a drop down menu, just drag any element to the right under its parent element, you can add multiple drop down elements and with multiple levels of depth (up to 3 levels of subitems).<\/p>\n<p>This is a simple example of a menu with two drop down elements:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1595545063655   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"1173\" height=\"837\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-1.png 1173w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-1-300x214.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-1-1024x731.png 1024w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-1-768x548.png 768w\" sizes=\"(max-width: 1173px) 100vw, 1173px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-1.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text]And the end result of this drop down menu would be:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1595545165872   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"702\" height=\"403\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-2.png 702w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-2-300x172.png 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-2.png\" alt=\"Image link\" \/><\/div><\/div>[vc_separator css=&#8221;.vc_custom_1595545158163{margin-top: 20px !important;}&#8221;]<a href=\"#pix_section_mega_menu\" ><div id=\"pix_section_mega_menu\" class=\"pix-feature-el  media \"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">2<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Mega Menu<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div><\/a>[vc_column_text]<\/p>\n<h6><strong>Creating Mega Menu<\/strong><\/h6>\n<p>You can create Mega menus easily within Essentials theme using the default WordPress menus page, to do so head over to WordPress menu editing page in\u00a0<strong>Appearance \u00bb Menus\u00a0<\/strong>and then select the menu that you want to edit.<\/p>\n<p>After that open the menu item (in the first level) which you want to have a dropdown Mega menu, and check the box\u00a0<strong>\u201cEnable Megamenu\u201d:<\/strong>[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621296084036   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"858\" height=\"539\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/enable-mega-menu.png 858w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/enable-mega-menu-300x188.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/enable-mega-menu-768x482.png 768w\" sizes=\"(max-width: 858px) 100vw, 858px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/enable-mega-menu.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text css=&#8221;.vc_custom_1621296404078{padding-top: 20px !important;}&#8221;]<\/p>\n<h6><strong>Mega menu size<\/strong><\/h6>\n<p>Starting from <strong>v2.0.0<\/strong> you can choose the width of the mega menu by clicking on the button <strong>&#8220;Advanced menu item Options&#8221; <\/strong>in the Mega menu item:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621296149731   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"857\" height=\"537\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options.png 857w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options-300x188.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options-768x481.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text css=&#8221;.vc_custom_1621296269500{padding-top: 20px !important;}&#8221;]then <strong>&#8220;Mega Menu Size&#8221;:<\/strong>[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621296190478   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"711\" height=\"291\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/mega-menu-size.png 711w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/mega-menu-size-300x123.png 300w\" sizes=\"(max-width: 711px) 100vw, 711px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/mega-menu-size.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text]<\/p>\n<h6><strong>Adding columns and links to your Mega Menu:<\/strong><\/h6>\n<p>To add columns to your mega menu, add a custom link from the left area with a link as \u201c#\u201d and the link as the desired title of the column inside the Mega menu (for example: Features), and add this custom link under the main mega menu main item (as second level item), and check the box <strong>\u201cConvert to column item\u201d<\/strong>, you can also choose the desired column width of this column, or you can change the style of the column by adding padding or lines.[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1595545499255   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"1009\" height=\"661\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-col-check.png 1009w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-col-check-300x197.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-col-check-768x503.png 768w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-col-check.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text]You can now add any number of columns with the same way inside the mega menu, and the columns can be in any different sizes depending on the style that you want to build.<\/p>\n<p>You can set a title for the whole column via &#8220;<strong>Navigation Label&#8221; <\/strong>field of that column item in your menu (check image above).<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>After that you can any normal WordPress menu items under the column (as third level menu items) to show under it in the mega menu.<\/strong><\/span>[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_1637616737076{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;border-left-color: rgba(0,0,0,0.05) !important;border-left-style: dashed !important;border-right-color: rgba(0,0,0,0.05) !important;border-right-style: dashed !important;border-top-color: rgba(0,0,0,0.05) !important;border-top-style: dashed !important;border-bottom-color: rgba(0,0,0,0.05) !important;border-bottom-style: dashed !important;border-radius: 10px !important;}&#8221;]<strong>Note:<\/strong> the width of each Row in the Mega menu consists of 12 width columns, therefore, if you have multiple <strong>item columns<\/strong> and their total width is over 12 width columns, some item columns may overflow to a new Row depending on the available space in each Row.[\/vc_column_text][vc_column_text]<\/p>\n<h6 class=\"pix-pb-10\"><strong>Adding multiple titles in the same column<\/strong><\/h6>\n<p>As mentioned in the previous section, you can set a title for the whole column via &#8220;<strong>Navigation Label&#8221; <\/strong>field of that column item in your menu (check image above).<\/p>\n<p>However, Starting from <strong>v2.0.0<\/strong>, you can add multiple titles in the same column, for example in the <a href=\"https:\/\/essentials.pixfort.com\/company\/\" target=\"_blank\" rel=\"noopener\"><strong>company demo<\/strong><\/a> menu:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621801157873   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"626\" height=\"390\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/mega-menu-multiple-titles-columns.png 626w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/mega-menu-multiple-titles-columns-300x187.png 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/mega-menu-multiple-titles-columns.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text]You can do that by changing the style of any item in the column to be a <strong>Heading item <\/strong>from the <strong>Advanced menu item Options <\/strong>button in that item:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621801499750   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"798\" height=\"291\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-heading-item-style.png 798w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-heading-item-style-300x109.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-heading-item-style-768x280.png 768w\" sizes=\"(max-width: 798px) 100vw, 798px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-heading-item-style.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text el_id=&#8221;pix_section_icons&#8221;]<\/p>\n<h6><strong>Adding icons to menu items<\/strong><\/h6>\n<p>Starting from <strong>v2.0.0<\/strong> you can add an icon to each item in your menu opening the <strong>Advanced menu item Options<\/strong> and then choose the desired icon:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621296149731   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"857\" height=\"537\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options.png 857w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options-300x188.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options-768x481.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/advanced-menu-item-options.png\" alt=\"Image link\" \/><\/div><\/div><div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1622156627019   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"1183\" height=\"859\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-icon.png 1183w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-icon-300x218.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-icon-1024x744.png 1024w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-icon-768x558.png 768w\" sizes=\"(max-width: 1183px) 100vw, 1183px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-icon.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text css=&#8221;.vc_custom_1631652236120{padding-bottom: 10px !important;}&#8221;]<strong>Note:<\/strong> currently adding icons is only available for normal menu items (at the moment icons will not appear if menu items are converted to Box item).[\/vc_column_text][vc_column_text el_id=&#8221;pix_section_menu_banners&#8221;]<\/p>\n<h6><strong>Adding menu banners<\/strong><\/h6>\n<p>In addition to normal links, you can add advanced items to the mega menu like image or video banners, to do so add any menu item inside the mega menu then open its options, then check the box <strong>\u201cConvert to Box item\u201d<\/strong> and choose the desired <strong>Title<\/strong> and <strong>text<\/strong>, and choose an <strong>image<\/strong> (or paste a link to a <strong>video<\/strong> to automatically display video background for the item), you can also change <strong>box style<\/strong> or its <strong>height<\/strong> or the <strong>color of the text<\/strong> inside the box:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1621384308485   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"883\" height=\"685\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-banner.png 883w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-banner-300x233.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-banner-768x596.png 768w\" sizes=\"(max-width: 883px) 100vw, 883px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-banner.png\" alt=\"Image link\" \/><\/div><\/div><div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1595545594282   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"1107\" height=\"749\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-3.png 1107w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-3-300x203.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-3-1024x693.png 1024w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-3-768x520.png 768w\" sizes=\"(max-width: 1107px) 100vw, 1107px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-3.png\" alt=\"Image link\" \/><\/div><\/div>[vc_column_text]When you finish editing the menu, save the changes and the menu will be updated in your website. The result for the example mega menu will be:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1595545649123   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"1178\" height=\"485\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-4.png 1178w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-4-300x124.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-4-1024x422.png 1024w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-4-768x316.png 768w\" sizes=\"(max-width: 1178px) 100vw, 1178px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-4.png\" alt=\"Image link\" \/><\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1600366640372{padding-top: 30px !important;}&#8221;][vc_column]<a href=\"#pix_section_video_banner\" ><div id=\"pix_section_video_banner\" class=\"pix-feature-el  media \"><div class=\"rounded-circle mr-3 d-inline-block2 d-inline-flex align-items-center justify-content-center line-height-0 mw-100 bg-primary-light \"   style=\" width:36px;aspect-ratio:1\/1 !important;position:relative;text-align:center;\"><div class=\"text-primary\" style=\"display:inline-block;width:20px;height:20px;font-size:20px;\"><svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <path d=\"M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z\" id=\"Path-10\" fill=\"#000000\"><\/path> <\/g> <\/svg><\/div><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Add video background to Menu Banners<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div><\/a>[vc_column_text]To add video background to <strong>Menu Banners\u00a0<\/strong>you just need to upload your video in <strong>MP4<\/strong> format to your <strong>WordPress Media Library<\/strong> and then copy the link and insert it in the <strong>Background field<\/strong> in your Menu item (right-click on the background field to avoid opening the Media Library popup).[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_1600367007040{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;border-left-color: rgba(0,0,0,0.05) !important;border-left-style: dashed !important;border-right-color: rgba(0,0,0,0.05) !important;border-right-style: dashed !important;border-top-color: rgba(0,0,0,0.05) !important;border-top-style: dashed !important;border-bottom-color: rgba(0,0,0,0.05) !important;border-bottom-style: dashed !important;border-radius: 10px !important;}&#8221;]<\/p>\n<ul>\n<li>It&#8217;s also possible to have your video hosted on external server, same as before you just need to copy it&#8217;s direct link and paste it in the Background field of your Menu item.<\/li>\n<li><em><strong>Note:<\/strong> YouTube videos and other video services will not work.<\/em><\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<h6><strong>Example of a Mega Menu with Video Banner<\/strong><\/h6>\n<p>[\/vc_column_text][vc_column_text]Below you can find an example of a Mega Menu with Video Banner (live demo in <a href=\"https:\/\/essentials.pixfort.com\/original\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Original Demo<\/strong><\/a>).[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1608493908683   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"934\" height=\"540\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-banner.png 934w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-banner-300x173.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-banner-768x444.png 768w\" sizes=\"(max-width: 934px) 100vw, 934px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-banner.png\" alt=\"Image link\" \/><\/div><\/div><div class=\"pix-el-text w-100 text-center  vc_custom_1608493938455\" ><p class=\"text-sm  text-body-default text-center font-weight-bold\" >Video Banner in Mega Menu (Original Demo)<\/p><\/div>[vc_column_text]To create a <strong>Video Banner<\/strong>, you need to have a column in your Mega Menu, for example:[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1608494378211   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"876\" height=\"477\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-column.png 876w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-column-300x163.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-column-768x418.png 768w\" sizes=\"(max-width: 876px) 100vw, 876px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-item-column.png\" alt=\"Image link\" \/><\/div><\/div><div class=\"pix-el-text w-100 text-center  vc_custom_1608494412962\" ><p class=\"text-sm  text-body-default text-center font-weight-bold\" >Create a column in your Mega Menu<\/p><\/div>[vc_column_text]Then add a sub item to that column (this will be the video banner), then check the option <strong>Convert to Box item\u00a0<\/strong>and fill the different fields of the banner.[\/vc_column_text]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1608494424814   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"829\" height=\"701\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-item.png 829w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-item-300x254.png 300w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-item-768x649.png 768w\" sizes=\"(max-width: 829px) 100vw, 829px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/menu-video-item.png\" alt=\"Image link\" \/><\/div><\/div><div class=\"pix-el-text w-100 text-center  vc_custom_1608494467718\" ><p class=\"text-sm  text-body-default text-center font-weight-bold\" >Add a sub item to the column and convert it to Box item<\/p><\/div>[vc_column_text css=&#8221;.vc_custom_1608496048838{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;border-left-color: rgba(0,0,0,0.05) !important;border-left-style: dashed !important;border-right-color: rgba(0,0,0,0.05) !important;border-right-style: dashed !important;border-top-color: rgba(0,0,0,0.05) !important;border-top-style: dashed !important;border-bottom-color: rgba(0,0,0,0.05) !important;border-bottom-style: dashed !important;border-radius: 10px !important;}&#8221;]Make sure to check the option <strong>Make the box full column height\u00a0<\/strong>if you want the banner to be <strong>full height<\/strong> depending on the height of the tallest column in the Mega Menu.<\/p>\n<hr \/>\n<p><em><strong>Note:<\/strong> To add video background<strong>\u00a0<\/strong>you just need to upload your video in <strong>MP4<\/strong> format to your <strong>WordPress Media Library<\/strong> and then copy the link and insert it in the <strong>Background field<\/strong> in your Menu item (right-click on the background field to avoid opening the Media Library popup).<\/em>[\/vc_column_text][vc_column_text]If you want, you can import Essentials Demo Menu from <strong>WordPress Panel &gt; Essentials &gt; Demo Import &gt; Miscellaneous.<\/strong>[\/vc_column_text][\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221;][vc_column content_align=&#8221;text-center&#8221;]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-img-el  vc_custom_1608494953356   shadow-sm text-left d-inline-block  w-100 rounded-xl\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-xl  h-1002\" style=\"height:auto;\" width=\"597\" height=\"461\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/demo-import-mega-menu.png 597w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/demo-import-mega-menu-300x232.png 300w\" sizes=\"(max-width: 597px) 100vw, 597px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/demo-import-mega-menu.png\" alt=\"Image link\" \/><\/div><\/div><div class=\"pix-el-text w-100 text-center  vc_custom_1608495108403\" ><p class=\"text-sm  text-body-default text-center font-weight-bold\" >WordPress Panel &gt; Essentials &gt; Demo Import &gt; Miscellaneous<\/p><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1600366640372{padding-top: 30px !important;}&#8221;][vc_column]<a href=\"#pix_section_menu_colors\" ><div id=\"pix_section_menu_colors\" class=\"pix-feature-el  media \"><div class=\"rounded-circle mr-3 d-inline-block2 d-inline-flex align-items-center justify-content-center line-height-0 mw-100 bg-primary-light \"   style=\" width:39.6px;aspect-ratio:1\/1 !important;position:relative;text-align:center;\"><div class=\"text-primary\" style=\"display:inline-block;width:22px;height:22px;font-size:22px;\"><svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <path d=\"M12,10.9996338 C12.8356605,10.3719448 13.8743941,10 15,10 C17.7614237,10 20,12.2385763 20,15 C20,17.7614237 17.7614237,20 15,20 C13.8743941,20 12.8356605,19.6280552 12,19.0003662 C11.1643395,19.6280552 10.1256059,20 9,20 C6.23857625,20 4,17.7614237 4,15 C4,12.2385763 6.23857625,10 9,10 C10.1256059,10 11.1643395,10.3719448 12,10.9996338 Z M13.3336047,12.504354 C13.757474,13.2388026 14,14.0910788 14,15 C14,15.9088933 13.7574889,16.761145 13.3336438,17.4955783 C13.8188886,17.8206693 14.3938466,18 15,18 C16.6568542,18 18,16.6568542 18,15 C18,13.3431458 16.6568542,12 15,12 C14.3930587,12 13.8175971,12.18044 13.3336047,12.504354 Z\" fill=\"#000000\" fill-rule=\"nonzero\" opacity=\"0.3\"><\/path> <circle fill=\"#000000\" cx=\"12\" cy=\"9\" r=\"5\"><\/circle> <\/g> <\/svg><\/div><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Customize Menu and dropdown Colors<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div><\/a>[vc_column_text]Customizing the menu and dropdown colors is done via the <strong>Header Builder<\/strong>, for detailed information about customizing the header colors you can check this article from our knowledge base:<\/p>\n<p>https:\/\/essentials.pixfort.com\/knowledge-base\/creating-website-header\/[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"Learn how to easily create a simple or Mega Menu.","protected":false},"author":1,"featured_media":3377,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,43],"tags":[23,415,20,157,22,19,17,414,21],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create Menus - Essentials Knowledge base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create Menus - Essentials Knowledge base\" \/>\n<meta property=\"og:description\" content=\"Learn how to easily create a simple or Mega Menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\" \/>\n<meta property=\"og:site_name\" content=\"Essentials Knowledge base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pixfort\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-23T16:04:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-30T23:18:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pixfort\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pixfort\" \/>\n<meta name=\"twitter:site\" content=\"@pixfort\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"pixfort\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\"},\"author\":{\"name\":\"pixfort\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\"},\"headline\":\"How to create Menus\",\"datePublished\":\"2020-07-23T16:04:12+00:00\",\"dateModified\":\"2022-11-30T23:18:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\"},\"wordCount\":2093,\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png\",\"keywords\":[\"dropdown\",\"dropdown color\",\"header\",\"header menu\",\"link\",\"mega menu\",\"menu\",\"menu color\",\"navigation\"],\"articleSection\":[\"Getting started\",\"Handpicked\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\",\"name\":\"How to create Menus - Essentials Knowledge base\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png\",\"datePublished\":\"2020-07-23T16:04:12+00:00\",\"dateModified\":\"2022-11-30T23:18:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create Menus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"name\":\"Essentials Knowledge base\",\"description\":\"made by pixfort\",\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\",\"name\":\"pixfort\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"width\":322,\"height\":110,\"caption\":\"pixfort\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pixfort\",\"https:\/\/twitter.com\/pixfort\",\"https:\/\/www.instagram.com\/pixfort\/\",\"https:\/\/www.linkedin.com\/company\/pixfort\",\"https:\/\/www.youtube.com\/c\/Pixfort\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\",\"name\":\"pixfort\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"caption\":\"pixfort\"},\"description\":\"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub\",\"sameAs\":[\"http:\/\/hub.pixfort.com\"],\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create Menus - Essentials Knowledge base","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/","og_locale":"en_US","og_type":"article","og_title":"How to create Menus - Essentials Knowledge base","og_description":"Learn how to easily create a simple or Mega Menu.","og_url":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/","og_site_name":"Essentials Knowledge base","article_publisher":"https:\/\/www.facebook.com\/pixfort","article_published_time":"2020-07-23T16:04:12+00:00","article_modified_time":"2022-11-30T23:18:51+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png","type":"image\/png"}],"author":"pixfort","twitter_card":"summary_large_image","twitter_creator":"@pixfort","twitter_site":"@pixfort","twitter_misc":{"Written by":"pixfort","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#article","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/"},"author":{"name":"pixfort","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6"},"headline":"How to create Menus","datePublished":"2020-07-23T16:04:12+00:00","dateModified":"2022-11-30T23:18:51+00:00","mainEntityOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/"},"wordCount":2093,"publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png","keywords":["dropdown","dropdown color","header","header menu","link","mega menu","menu","menu color","navigation"],"articleSection":["Getting started","Handpicked"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/","name":"How to create Menus - Essentials Knowledge base","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website"},"primaryImageOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png","datePublished":"2020-07-23T16:04:12+00:00","dateModified":"2022-11-30T23:18:51+00:00","breadcrumb":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#primaryimage","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/create-menu.png","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-create-menus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/essentials.pixfort.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"How to create Menus"}]},{"@type":"WebSite","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","name":"Essentials Knowledge base","description":"made by pixfort","publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization","name":"pixfort","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","width":322,"height":110,"caption":"pixfort"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pixfort","https:\/\/twitter.com\/pixfort","https:\/\/www.instagram.com\/pixfort\/","https:\/\/www.linkedin.com\/company\/pixfort","https:\/\/www.youtube.com\/c\/Pixfort"]},{"@type":"Person","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6","name":"pixfort","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","caption":"pixfort"},"description":"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub","sameAs":["http:\/\/hub.pixfort.com"],"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/"}]}},"_links":{"self":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3364"}],"collection":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=3364"}],"version-history":[{"count":57,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3364\/revisions"}],"predecessor-version":[{"id":6461,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3364\/revisions\/6461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media\/3377"}],"wp:attachment":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=3364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=3364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=3364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}