{"id":1120,"date":"2016-12-14T09:17:24","date_gmt":"2016-12-14T09:17:24","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=1120"},"modified":"2022-04-14T09:43:56","modified_gmt":"2022-04-14T09:43:56","slug":"menu-creation","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/widgets-menus\/menu-creation","title":{"rendered":"Menu Creation"},"content":{"rendered":"<p>The menu is one of the most important elements of the site. It provides your visitors with the information about site structure.<\/p>\n<p>So creating the easy and user-friendly menu is the key task.<\/p>\n<p>If your menu has well-thought and conveniently grouped elements, you visitors will be able to find the needed section easily.<\/p>\n<p>Below you may find the overview of the two main menu types and detailed instruction on creating the menu for your site.<\/p>\n<p>Navigate to <del class=\"support-arrow-right\">Appearance<\/del> <del>Menus<\/del> section to manage all menus on your site. You may also check more information about the Menus section in the <a href=\"https:\/\/codex.wordpress.org\/Appearance_Menus_Screen\">WordPress Codex<\/a>.<\/p>\n<p>In this section, you may create <strong>Simple<\/strong> or <strong>Advanced\u00a0Menu <\/strong>styles\u00a0for your site.<\/p>\n<h5><strong>Simple Menu<\/strong><\/h5>\n<h6>Create one level menu with the\u00a0simple structure for your site.<\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1125 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Simple-Menu.jpg\" alt=\"simple-menu\" width=\"978\" height=\"661\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Simple-Menu.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Simple-Menu-300x203.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Simple-Menu-768x519.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<p>To <strong>create new menu\u00a0<\/strong>navigate to <del class=\"support-arrow-right\">Appearance<\/del> <del>Menus<\/del> enter the <strong>Menu Name<\/strong> to the field and click <strong>Create Menu<\/strong> button.<\/p>\n<p>In <strong>Menu Structure<\/strong> section\u00a0you can arrange\u00a0menu elements into the navigation. Here you may add the elements from the left column &#8211; these can be Pages, Posts, Categories, Custom Links, etc.<\/p>\n<p>Select the needed elements and click <strong>Add to Menu\u00a0<\/strong>button.<\/p>\n<p>To <strong>open additional options<\/strong> for each menu element\u00a0click the <strong>arrow icon<\/strong> on the right of the item.<\/p>\n<ul>\n<li><strong>Navigation Label<\/strong> &#8211; specify the title for your menu item.<\/li>\n<li><strong>Title Attribute<\/strong> &#8211; enter the subtitle for the menu element.<\/li>\n<li><strong>Icon<\/strong> &#8211; you may select the icon to be displayed near menu elements in the\u00a0header.<\/li>\n<li><strong>Enable mega menu<\/strong> &#8211; switch it to <strong>Enable\u00a0<\/strong>to create <strong>advanced menu <\/strong>style (with sub-menu items).<\/li>\n<li><strong>Enable full-width menu<\/strong> &#8211; switch it to <strong>Enable<\/strong> to set the menu drop-down to full width.\u00a0Note, Full-width menu will not work if Mega menu is enabled (yes is set in\u00a0<strong>Enable mega menu<\/strong>).<\/li>\n<li><strong>Move<\/strong> &#8211; here you can change the position of the menu item inside the navigation. You may also drag-n-drop the item to any needed position.<\/li>\n<li><strong>Remove<\/strong> &#8211; click in case you want to delete the item.<\/li>\n<\/ul>\n<p>For more expanded navigation you can create<strong> Advanced menu <\/strong>with sub-menus of different levels.<\/p>\n<h5><strong>Advanced menu<\/strong><\/h5>\n<h6>Create the menu with drop-downs.<\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1130 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Advanced-menu.jpg\" alt=\"advanced-menu\" width=\"978\" height=\"885\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Advanced-menu.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Advanced-menu-300x271.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Advanced-menu-768x695.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Navigation Label<\/strong> &#8211; specify the title for your menu item.<\/li>\n<li><strong>Title Attribute<\/strong> &#8211; enter the subtitle for the menu element.<\/li>\n<li><strong>Icon<\/strong> &#8211; you may select the icon to be displayed near menu elements in the\u00a0header.<\/li>\n<li><strong>Image<\/strong> &#8211; here you can upload the image to be displayed as a background. It is applied to the menu item which contains sub-menu elements, so the image will be set as a background for the drop-down list.<\/li>\n<li><strong>Enable mega menu<\/strong> &#8211; switch it to <strong>Enable<\/strong> to create advanced menu style (with sub-menu items).<\/li>\n<li><strong>Enable full-width menu<\/strong> &#8211; set it to <strong>Enable<\/strong> if\u00a0your want to have the full-width menu on your site.<\/li>\n<li><strong>Limit Max columns number<\/strong> &#8211; select the number of the columns for the elements to be displayed\u00a0in the drop-down. <strong>Six<\/strong> is the maximum value.<\/li>\n<li><strong>Move<\/strong> &#8211; here you can change the position of the menu item inside the navigation. You may also<strong> drag-n-drop<\/strong> the item to any needed position.<\/li>\n<li><strong>Remove<\/strong> &#8211; click in case you want to delete the item.<\/li>\n<\/ul>\n<p>The menu elements such as\u00a0Layout variations and Blog grid (see the screenshot above)\u00a0are located inside the main menu elements and will be displayed\u00a0as the second and third level of sub-menus respectively.<\/p>\n<h5>Menu settings<\/h5>\n<h6>In this section, you can adjust extra options for the current menu.<\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1133 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Menu-settings.jpg\" alt=\"menu-settings\" width=\"978\" height=\"270\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Menu-settings.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Menu-settings-300x83.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Menu-settings-768x212.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Auto add pages<\/strong> &#8211; you can select\u00a0whether the new pages will be added automatically to the menu or not.\n<ul>\n<li><strong>Automatically add new top-level pages to this menu<\/strong> &#8211; set it to <strong>Enable<\/strong> if you want to add each new create Page to the menu automatically.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Theme locations<\/strong> &#8211; you may assign the menu to a certain navigation type on the site.<\/li>\n<\/ul>\n<p>Check the theme<strong> menu locations<\/strong> below and assign the needed menu to them.<\/p>\n<p>Note, these locations can be also set in the <del class=\"support-arrow-right\">Appearance<\/del> <del class=\"support-arrow-right\">Menus<\/del>\u00a0<del>Manage Locations\u00a0<\/del>section.<\/p>\n<ul>\n<li><strong>Primary Navigation<\/strong> &#8211;\u00a0is the main site menu and is used almost in all header styles and menu locations.<\/li>\n<li><strong>Top Left Navigation (for header style 3 and 4)<\/strong> &#8211;\u00a0menu used in header styles 3 and 4 for the left side navigation.<\/li>\n<li><strong>Top Right Navigation (for header style 3 and 4)<\/strong> &#8211;\u00a0menu used in header styles 3 and 4 for the right side navigation.<\/li>\n<li><strong> Additional header navigation<\/strong> &#8211; menu used in header styles 5 and 6 as additional header navigation located in the Top info panel.<\/li>\n<li><strong>Side header style 11 navigation<\/strong> &#8211; the menu used for header style 11.<\/li>\n<li><strong>Footer navigation <\/strong>&#8211;\u00a0menu used in the footer menu, if the <strong>Footer menu<\/strong>\u00a0is enabled in <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Footer section options<\/del> <del>Main footer settings<\/del> section.<\/li>\n<\/ul>\n<p><strong>Save the menu<\/strong> after everything is set properly and check it on the site.<\/p>\n<h3 id=\"anchors\">Anchors<\/h3>\n<h4>The perfect solution for One page site to get the\u00a0convenient\u00a0menu to navigate within a page.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1252 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Anchors.jpg\" alt=\"anchors\" width=\"978\" height=\"613\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Anchors.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Anchors-300x188.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Anchors-768x481.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<p>Below you can find the short instruction on anchor menu creation.<\/p>\n<ul>\n<li>Add anchors to any row of the page. Navigate to <del class=\"support-arrow-right\">Row Settings<\/del> <del>Row heading options<\/del> and type the anchor title to the <del>Anchor<\/del> field.<\/li>\n<li>After that, you&#8217;ll have to add this anchor to the menu navigation. Go to <del class=\"support-arrow-right\">Appearance<\/del> <del>Menus<\/del> and add Custom link element to the menu. Type the anchor title with the &#8216;sharp&#8217; sign &#8211; # before it to the Link field of the menu element. Note, you need to avoid spaces between anchor titles within menu element.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12878\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/row-anchor1.jpg\" alt=\"\" width=\"978\" height=\"832\" \/><\/p>\n<p>Note, in case you have <strong>portfolios<\/strong> or other elements placed not on the home page, and you&#8217;ll need your visitors to navigate back to the homepage from various inner pages, you&#8217;ll have to type the site address before anchors, e.g: http:\/\/your-site-url<strong>#anchor<\/strong><\/p>\n<p>Note, the\u00a0<strong>anchors on One Page Scroll<\/strong>\u00a0page template types need to be added with \u2018<strong>section-<\/strong>\u2018 word before anchor sign,\u00a0<strong>e.g.: #section-2, while in the Row Settings, only the number should be entered, e.g: 2. Also, it is necessary to have the anchor added to each of the rows if\u00a0One Page Scroll page template is selected.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The menu is one of the most important elements of the site. It provides your visitors with the information about site structure. So creating the easy and user-friendly menu is<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[37,19],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/1120"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":32,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"predecessor-version":[{"id":15534,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/1120\/revisions\/15534"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}