{"id":4058,"date":"2017-01-27T06:59:07","date_gmt":"2017-01-27T06:59:07","guid":{"rendered":"http:\/\/demo.agnidesigns.com\/fortune\/documentation\/?p=4058"},"modified":"2017-07-27T05:32:28","modified_gmt":"2017-07-27T05:32:28","slug":"creating-menu","status":"publish","type":"page","link":"https:\/\/demo.agnihd.com\/milton\/documentation\/creating-menu\/","title":{"rendered":"Creating Menu"},"content":{"rendered":"<p>[vc_row fullwidth=&#8221;has-fullwidth-column-no-padding&#8221; el_id=&#8221;menu-setup&#8221; el_class=&#8221;menu-setup&#8221;][vc_column][vc_column_text]Menu takes an important part in the webpage. WordPress allows us to include pages, posts, custom links and categories to the menu. Additionally, this theme allows you to create a One Page menu &amp; Mega menu to show your website contents more efficiently.[\/vc_column_text][\/vc_column][vc_column][vc_custom_heading text=&#8221;Basic Menu Creation&#8221; font_container=&#8221;tag:h4|text_align:left&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text css=&#8221;.vc_custom_1450865665044{padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: #f0f1f2 !important;}&#8221;]Step 1 &#8211; Go to Appearance\/Menus.<\/p>\n<p>Step 2 &#8211; Create New Menu and add the Page\/Custom Links from the left side panel.<\/p>\n<p>Step 3 &#8211; Choose your Menu Location at the bottom for ex. Primary Menu.<\/p>\n<p>Step 4 &#8211; Click Save Menu.[\/vc_column_text]<div class=\" agni-image custom-image-container text-left\">\r\n\t\t\t<figure class=\"agni-image-figure\">\r\n\t\t\t\t<a href=\"\" class=\"custom-image\" target=\"_self\"><\/a>\r\n\t\t\t\t<figcaption class=\"vc_figure-caption\"><\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div><div class=\" separator separator_center\" style=\"width:20%; \">\r\n\t\t\t\t\t<span class=\"sep_holder sep_holder_l\"><span style=\"border-top-style:solid; border-color:#e8e8e8\" class=\"sep_line\"><\/span><\/span>\r\n\t\t\t\t\t\r\n\t\t\t\t\t<span class=\"sep_holder sep_holder_r\"><span style=\"border-top-style:solid; border-color:#e8e8e8\" class=\"sep_line\"><\/span><\/span>\r\n\t\t\t\t<\/div>[\/vc_column][vc_column][vc_custom_heading text=&#8221;Mega Menu Creation&#8221; font_container=&#8221;tag:h4|text_align:left&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]To build a Mega menu, just create a normal(usual) menu as you done for basic menu setup. Once you have created the basic menu, follow the below steps.<\/p>\n<p>Go to Top Right at Appearance\/Menus and check the CSS Classes checkbox under Show advanced menu properties.<br \/>\nNow, add class name megamenu under parent menu item&#8217;s css classes.<br \/>\nThen add class name col-md-2\/col-md-3\/col-md-4\/col-md-6 in all immediate child menu item&#8217;s css classes.<br \/>\n[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_1450865665044{padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: #f0f1f2 !important;}&#8221;]Step 1 &#8211; Go to Appearance\/Menus.<\/p>\n<p>Step 2 &#8211; Create New Menu and add the Page\/Custom Links from the left side panel.<\/p>\n<p>Step 3 &#8211; Choose your Menu Location at the bottom for ex. Primary Menu.<\/p>\n<p>Step 4 &#8211; Click Save Menu.[\/vc_column_text]<div id=\"agni-video-97061\" class=\" custom-video agni-video embed-responsive embed-responsive-16by9\">\r\n\t\t\t\t<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/XVfWEE22q1s\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n\t\t\t<\/div>  [vc_column_text]<small>A short video tutorial to create a Mega menu<\/small>[\/vc_column_text]<div class=\" separator separator_center\" style=\"width:20%; \">\r\n\t\t\t\t\t<span class=\"sep_holder sep_holder_l\"><span style=\"border-top-style:solid; border-color:#e8e8e8\" class=\"sep_line\"><\/span><\/span>\r\n\t\t\t\t\t\r\n\t\t\t\t\t<span class=\"sep_holder sep_holder_r\"><span style=\"border-top-style:solid; border-color:#e8e8e8\" class=\"sep_line\"><\/span><\/span>\r\n\t\t\t\t<\/div>[\/vc_column][vc_column][vc_custom_heading text=&#8221;One Page Menu Creation&#8221; font_container=&#8221;tag:h4|text_align:left&#8221; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]Mandatory &#8211; You should have created a page and page must contain rows with IDs. You can find detailed instructions to create a page HERE[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_1450968545696{margin-bottom: 0px !important;}&#8221;]To create a One Page menu, follow the below steps.[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_1450928942376{padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: #f6f7f8 !important;}&#8221;]Step 1 &#8211; Go to Appearance\/Menus and create a new menu.<\/p>\n<p>Step 2 &#8211; Now, add Custom Links from the left side panel with your desired page&#8217;s link (for ex. http:\/\/yoursite.com\/).<\/p>\n<p>Step 3 &#8211; Then add your desired row&#8217;s ID with # prefix(for ex. #about) next to the page&#8217;s link which belongs to the corresponding page. Here is the example of complete menu item&#8217;s link &#8211; http:\/\/yoursite.com\/#about<\/p>\n<p>Step 4 &#8211; To create an another menu item, repeat the step 2 &amp; step 3.[\/vc_column_text]<div id=\"agni-video-57600\" class=\" custom-video agni-video embed-responsive embed-responsive-16by9\">\r\n\t\t\t\t<iframe width=\"1280\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/PvQAobmbdYk?rel=0&amp;showinfo=0\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n\t\t\t<\/div>  [vc_column_text]<small>A short video tutorial to create a One Page menu<\/small>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Menu takes an important part in the webpage. WordPress allows us to include pages, posts, custom links and categories to the menu. Additionally, this theme allows you to create a One Page menu &amp; Mega menu to show your website contents more efficiently.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/pages\/4058"}],"collection":[{"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/comments?post=4058"}],"version-history":[{"count":4,"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/pages\/4058\/revisions"}],"predecessor-version":[{"id":4647,"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/pages\/4058\/revisions\/4647"}],"wp:attachment":[{"href":"https:\/\/demo.agnihd.com\/milton\/documentation\/wp-json\/wp\/v2\/media?parent=4058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}