{"id":53,"date":"2017-01-02T11:41:48","date_gmt":"2017-01-02T11:41:48","guid":{"rendered":"http:\/\/themes.themegoods.com\/grandtour\/doc\/?p=53"},"modified":"2017-01-02T11:54:16","modified_gmt":"2017-01-02T11:54:16","slug":"setting-up-menu","status":"publish","type":"post","link":"https:\/\/themes.themegoods.com\/grandtour\/doc\/setting-up-menu\/","title":{"rendered":"Setting up Menu"},"content":{"rendered":"<p><strong>Menu Layouts Option<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-56\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.43.35-PM.png\" alt=\"\" width=\"296\" height=\"271\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.43.35-PM.png 296w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.43.35-PM-60x55.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.43.35-PM-150x137.png 150w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/p>\n<p>Theme\u00a0Support various menu layouts and you can change it via <strong>Appearance &gt; Customize &gt; Navigation &gt; General &gt; Menu Layout.<\/strong><\/p>\n<p><strong>Setting up Menu using WordPress Custom Menu<\/strong><\/p>\n<p>Theme\u00a0Support custom WordPress menu, you can organise them into dropdown menu too.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-58\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM-1024x466.png\" alt=\"\" width=\"980\" height=\"446\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM-1024x466.png 1024w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM-300x136.png 300w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM-768x349.png 768w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM-60x27.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM-150x68.png 150w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.44.39-PM.png 1251w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<p>For those who are not familiar with WordPress menu system below are video tutorial.<\/p>\n<p><iframe src=\"\/\/www.youtube.com\/embed\/3TkXaoMIzQ4\" width=\"660\" height=\"371\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>Setup Primary\u00a0Menu<\/strong><\/p>\n<ol>\n<li>Go to <strong>Appearance &gt; Menus<\/strong>. Click &#8220;Create Menu&#8221; button<\/li>\n<li>To add menu items, select one of your pages\/posts on the left hand boxes. Then click &#8220;Add To Menu&#8221;.<\/li>\n<li>If you want to add custom link menu item (for example home link). Select &#8220;Links&#8221; and enter URL, Link Text there.<\/li>\n<li>You can organise your menu items using drag&amp;drop\u00a0functionality. Simple drag a menu item right below to the parent menu item.<\/li>\n<li>After setting up your menu, scroll down to the bottom of the page then assign the menu to <strong>&#8220;Primary Menu&#8221;<\/strong> in the Theme Locations box.<\/li>\n<\/ol>\n<p><strong>Setup Secondary\u00a0Menu<\/strong><\/p>\n<p>If you select <strong>&#8220;Center Logo + 2 Menus&#8221;<\/strong> layout, you can also setup <strong>&#8220;Secondary Menu&#8221;<\/strong> so it displays as right logo menu. See above screenshot.<\/p>\n<ol>\n<li>Go to <strong>Appearance &gt; Menus<\/strong>. Click &#8220;Create Menu&#8221; button<\/li>\n<li>To add menu items, select one of your pages\/posts on the left hand boxes. Then click &#8220;Add To Menu&#8221;.<\/li>\n<li>If you want to add custom link menu item (for example home link). Select &#8220;Links&#8221; and enter URL, Link Text there.<\/li>\n<li>You can organise your menu items using drag&amp;drop\u00a0functionality. Simple drag a menu item right below to the parent menu item.<\/li>\n<li>After setting up your menu, scroll down to the bottom of the page then assign the menu to <strong>&#8220;Secondary Menu&#8221;<\/strong> in the Theme Locations box.<\/li>\n<\/ol>\n<p><strong>Sticky Menu (Optional)<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-62\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.46.03-PM.png\" alt=\"\" width=\"276\" height=\"188\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.46.03-PM.png 276w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.46.03-PM-60x41.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.46.03-PM-150x102.png 150w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><\/p>\n<p>If you enable sticky menu option. When visitor scroll down to page. The menu bar will stay at top while visitor scrolling. You can enable this option via\u00a0<strong>Appearance &gt; Customize &gt; Navigation\u00a0&gt; General\u00a0&gt;Enable Sticky Menu<\/strong><\/p>\n<p><strong>Mega Menu (Optional)<\/strong><\/p>\n<p>Mega Menu is extensive sub menu which allow you to display large amount menu items into columns. You can select from 2-4 columns. To setup mega menu. Open <strong>Appearance &gt; Menus\u00a0<\/strong>then you can drag menu items to be child of parent items.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-64\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.29.46-AM.png\" alt=\"\" width=\"417\" height=\"192\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.29.46-AM.png 417w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.29.46-AM-300x138.png 300w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.29.46-AM-60x28.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.29.46-AM-150x69.png 150w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/p>\n<p>On menu parent item, open its option box and add class &#8220;<strong>megamenu<\/strong>&#8221; to enable mega menu display. Then enter number of columns you want. For example if you want to display mega menu in 4 columns enter class &#8220;<strong>col4<\/strong>&#8220;.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-65\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.31.11-AM.png\" alt=\"\" width=\"490\" height=\"945\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.31.11-AM.png 490w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.31.11-AM-156x300.png 156w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.31.11-AM-31x60.png 31w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.31.11-AM-78x150.png 78w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/p>\n<p>So you need to add and organise menu items of this mega menu into 4 columns. Please see above screenshot of Appearance &gt; Menus to get an example.<\/p>\n<p>You can also can display or hide columns name.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-66\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.33.08-AM.png\" alt=\"\" width=\"410\" height=\"190\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.33.08-AM.png 410w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.33.08-AM-300x139.png 300w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.33.08-AM-60x28.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-05-18-at-10.33.08-AM-150x70.png 150w\" sizes=\"(max-width: 410px) 100vw, 410px\" \/><\/p>\n<p>By default it displays each mega menu columns name ex. Project Fullwidth, Project Grid etc. You can also hide it by open menu item option and add &#8220;<strong>hidden<\/strong>&#8221; CSS class.<\/p>\n<p><strong>Customise Main Menu Options and Colors<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-68\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.47.38-PM.png\" alt=\"\" width=\"293\" height=\"429\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.47.38-PM.png 293w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.47.38-PM-205x300.png 205w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.47.38-PM-41x60.png 41w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.47.38-PM-102x150.png 102w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><\/p>\n<p>You can fully customise main menu options ex. typography, colors, background colors etc. Go to <strong>Appearance &gt; Customize &gt;\u00a0Navigation<\/strong><\/p>\n<p><strong>Setup Top Bar Menu (Optional)<\/strong><\/p>\n<ol>\n<li>Go to <strong>Appearance &gt; Menus<\/strong>. Click &#8220;Create Menu&#8221; button<\/li>\n<li>To add menu items, select one of your pages\/posts on the left hand boxes. Then click &#8220;Add To Menu&#8221;.<\/li>\n<li>If you want to add custom link menu item (for example home link). Select &#8220;Links&#8221; and enter URL, Link Text there.<\/li>\n<li>You can organise your menu items using drag&amp;drop\u00a0functionality. Simple drag a menu item right below to the parent menu item.<\/li>\n<li>After setting up your menu, scroll down to the bottom of the page then assign the menu to <strong>&#8220;Top Bar Menu&#8221;<\/strong> in the Theme Locations box.<\/li>\n<\/ol>\n<p><strong>IMPORTANT: top Bar Menu is not support sub menu.<\/strong><\/p>\n<p><strong>Setup Side Menu (Mobile Menu)<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-70\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM-1024x487.png\" alt=\"\" width=\"980\" height=\"466\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM-1024x487.png 1024w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM-300x143.png 300w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM-768x365.png 768w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM-60x29.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM-150x71.png 150w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.48.22-PM.png 1211w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/>Side menu is hidden by default. Visitor click three bar icon on the top right of screen to open it. It&#8217;s also main menu or tablet (portrait view) and mobile devices.<\/p>\n<ol>\n<li>Go to <strong>Appearance &gt; Menus<\/strong>. Click &#8220;Create Menu&#8221; button<\/li>\n<li>To add menu items, select one of your pages\/posts on the left hand boxes. Then click &#8220;Add To Menu&#8221;.<\/li>\n<li>If you want to add custom link menu item (for example home link). Select &#8220;Links&#8221; and enter URL, Link Text there.<\/li>\n<li>After setting up your menu, scroll down to the bottom of the page then assign the menu to <strong>&#8220;Side (Mobile) Menu&#8221;<\/strong> in the Theme Locations box.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>Setup Footer Menu (Optional)<\/strong><\/p>\n<ol>\n<li>Go to <strong>Appearance &gt; Menus<\/strong>. Click &#8220;Create Menu&#8221; button<\/li>\n<li>To add menu items, select one of your pages\/posts on the left hand boxes. Then click &#8220;Add To Menu&#8221;.<\/li>\n<li>If you want to add custom link menu item (for example home link). Select &#8220;Links&#8221; and enter URL, Link Text there.<\/li>\n<li>You can organise your menu items using drag&amp;drop\u00a0functionality.<\/li>\n<li>After setting up your menu, scroll down to the bottom of the page then assign the menu to &#8220;<strong>Footer Menu<\/strong>&#8221; in the Theme Locations box.<\/li>\n<li>Open <strong>Appearance &gt; Customize &gt; Footer\u00a0&gt; Copyright\u00a0&gt;\u00a0Copyright Right Area Content<\/strong> and select &#8220;Footer Menu&#8221;.<\/li>\n<\/ol>\n<p><strong>NOTE: Footer menu is not support sub menu.<\/strong><\/p>\n<p><strong>Add Contact Info<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-72\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.53.28-PM.png\" alt=\"\" width=\"295\" height=\"438\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.53.28-PM.png 295w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.53.28-PM-202x300.png 202w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.53.28-PM-40x60.png 40w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2560-01-02-at-6.53.28-PM-101x150.png 101w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/p>\n<p>You can add contact information displays on top bar. Go to\u00a0<strong>Appearance &gt; Customize &gt; Navigation &gt; Contact Info<\/strong><\/p>\n<p><strong>Note: Please make sure you enable Top Bar in order to display contact info content.<\/strong><\/p>\n<p><strong>Make Menu Transparent<\/strong><\/p>\n<p>Theme has a page option to make main menu transparent. When you on edit page, look at page option meta box. Check &#8220;Make Menu Transparent&#8221; option and save changes.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-74\" src=\"http:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-3.15.25-PM.png\" alt=\"\" width=\"270\" height=\"94\" srcset=\"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-3.15.25-PM.png 270w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-3.15.25-PM-60x21.png 60w, https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-3.15.25-PM-150x52.png 150w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><\/p>\n<p><strong>IMPORTANT:<\/strong> If you use menu transparent option. We recommended to add the first content as image content so your menu is visible otherwise main menu content will be invisible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Menu Layouts Option Theme\u00a0Support various menu layouts and you can change it via Appearance &gt; Customize &gt; Navigation &gt; General &gt; Menu Layout. Setting up Menu using WordPress Custom Menu Theme\u00a0Support custom WordPress menu, you can organise them into dropdown menu too. For those who are not familiar with WordPress menu system below are video [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[40,41,42,43,44,45,46,47],"_links":{"self":[{"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/posts\/53"}],"collection":[{"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":12,"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/posts\/53\/revisions\/75"}],"wp:attachment":[{"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandtour\/doc\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}