{"id":15690,"date":"2018-09-19T09:52:50","date_gmt":"2018-09-19T13:52:50","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15690"},"modified":"2021-08-05T12:54:22","modified_gmt":"2021-08-05T16:54:22","slug":"working-with-menus-in-boldgrid-crio","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/working-with-menus-in-boldgrid-crio\/","title":{"rendered":"Working with Menus in BoldGrid Crio"},"content":{"rendered":"\n

$\"\"$ <\/p>\n

With BoldGrid Crio you can easily create and modify menus from the Customizer. It comes with 5 unique menu locations you can use in your design: Main Menu, Secondary Menu, Tertiary Menu, Quaternary Menu, and Social Icons.<\/p>\n

In the Dashboard navigate to Appearance<\/b> → Customize <\/b>→ Menus<\/b><\/li>\n
Click Create New Menu<\/b><\/li>\n
Enter your new Menu name<\/b><\/li>\n
Select the Location this menu will be displayed in<\/li>\n
Click Next <\/b>to begin adding Menu Items<\/li>\n<\/ul>\n
Working with Menu Locations in the Header and Footer<\/h2>\n
The starting layout of Crio has a Main Menu in the Header and the Social Menu either in the Header or Footer. If you want a third menu, or if these two locations no longer exist, you will need to add a Menu Location to the Header or Footer layout. Otherwise when you create the menu you will see no locations available for one of two reasons.<\/p>\n
If your screen looks like this, there are no Menu Locations anywhere in the theme.<\/p>\n
$\"\"$ <\/p>\n
If your screen looks like this, all of the currently available Menu Locations have a menu assigned.<\/p>\n
$\"\"$ <\/p>\n
Either way, you will need to add a Menu Location to the header<\/a> or footer<\/a> layout first.<\/p>\n
How to Add Menu Items<\/h2>\n
\n
Click Add Items<\/b><\/li>\n
Choose the type of menu item you want to add by selecting it<\/li>\n
Click the Item <\/b>to add it to the Menu<\/b><\/li>\n
Click Publish<\/b> to save your changes<\/li>\n<\/ul>\n
Types of Menu Links<\/h3>\n
There are 5 types of links you can add by default, but based on the plugins active you may have others. They are Custom Links, Pages, Posts, Categories, and Tags.<\/p>\n
$\"\"$ <\/p>\n
Custom Links <\/b>are links that go somewhere other than to a page, post, category, or tag on your website. The URL<\/b> is where the user should go after clicking the link. The Link Text<\/b> is what word(s) show in your navigation menu for this link. Don’t forget to include the http:\/\/ at the beginning!<\/p>\n
$\"\"$ <\/p>\n
Pages<\/b> will show you a list of every page on your website with a + icon next to it. If that page has already been added to the menu, it will have a check mark and the text will be gray. In the example below, Sample Page is in the menu and Home is not. You can add a new page using the textbox below the page list. Simply enter the desired page name and click the + Add<\/b> button. The page will be created in your dashboard and immediately added to the menu.<\/p>\n
$\"\"$ <\/p>\n
Posts<\/b> are added the exact same way as Pages.<\/p>\n
Categories <\/b>and Tags <\/b>each provide a list of each to add, with the same + and checkmark icons. The only difference is you cannot create a new category or tag from the Customizer.<\/p>\n
Open a Menu Link in a New Tab<\/h3>\n\n
Start by opening the Customizer, then clicking on Menus.<\/li>\n
Click the gear icon next to the Menu heading to open the Advanced Menu Properties.<\/li>\n
Check Link Target<\/strong>.<\/li>\n<\/ul>\n $\"customizer$ <\/a><\/p>\n
\n
Navigate to the menu that contains the link item you want to open in a new tab.<\/li>\n
Click the dropdown arrow next to that link item and enable Open link in a new tab.<\/li>\n<\/ul>\n
$\"Open$ <\/a><\/p>\n
Save and close the Customizer and now your link should open in a new tab.<\/p>\n
How to Use Text Links Instead of Social Media Icons<\/h3>\n
By default, social media links will turn into an icon when added to a menu. If you’d like to use the entered text instead of an icon, you can use a plugin like Code Snippets<\/a> to add custom code like shown below. You can add additional unset lines as needed to include additional social media sites.<\/p>\n
function bgsc_remove_social_icon($networks){\r\nunset($networks['youtube.com']);\r\nunset($networks['facebook.com']);\r\nunset($networks['twitter.com']);\r\nreturn $networks;\r\n}\r\nadd_filter('boldgrid_social_icon_networks' , 'bgsc_remove_social_icon');<\/pre>\n
Add Custom Social Media Icons<\/h3>\n
BoldGrid Crio also allows you to add custom social media icons<\/a> like TikTok that are not included out of the box. These instructions also cover how to make an email address in a menu turn into an envelope icon.<\/p>\n
Working with Menu Locations<\/h2>\n
\n
Navigate to Customizer <\/b>→ Menus<\/b><\/li>\n
Scroll down to Menu Locations<\/b> and click View All Locations<\/b><\/li>\n<\/ul>\n
From here you can see all the menu locations in use and where your menus are currently assigned. Click on the drop-down arrow to select a different menu or click on the new menu link to create a new menu for that location.<\/p>\n
Note:<\/b> If you need more menu locations, please add one to the header<\/a> or footer<\/a> layout first.<\/p>\n
To remove a menu, click the menu name and choose the “– Select –<\/b>” option. Once the menu is removed from the location, you may want to remove the Menu Location from the header<\/a> or footer<\/a> layout as well.<\/p>\n
Congratulations! You now have the information needed to work with menus in BoldGrid Crio! Next, you may want to work with menu fonts<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
With BoldGrid Crio you can easily create and modify menus from the Customizer. It comes with 5 unique menu locations you can use in your design: Main Menu, Secondary Menu, Tertiary Menu, Quaternary Menu, and Social Icons. In the Dashboard navigate to Appearance → Customize → Menus Click Create New Menu Enter your new Menu […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Working with Menus in Crio | BoldGrid Crio","bgseo_description":"Working with Menus in BoldGrid Crio is very similar to the default WordPress menu creation process. BoldGrid Crio comes with 5 unique menu locations you can use in your design: Main Menu, Secondary Menu, Tertiary Menu, Quaternary Menu, and Social Icons.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[573],"tags":[29,160],"class_list":["post-15690","post","type-post","status-publish","format-standard","hentry","category-boldgrid-crio-supertheme-product-guide","tag-customizer","tag-menu","feature-type-free","experience-level-getting-started"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15690"}],"version-history":[{"count":10,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15690\/revisions"}],"predecessor-version":[{"id":41380,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15690\/revisions\/41380"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

How to Add Menu Items<\/h2>\n\nClick Add Items<\/b><\/li>\nChoose the type of menu item you want to add by selecting it<\/li>\nClick the Item <\/b>to add it to the Menu<\/b><\/li>\n

Open a Menu Link in a New Tab<\/h3>\n\nStart by opening the Customizer, then clicking on Menus.<\/li>\nClick the gear icon next to the Menu heading to open the Advanced Menu Properties.<\/li>\n

Add Custom Social Media Icons<\/h3>\nBoldGrid Crio also allows you to add custom social media icons<\/a> like TikTok that are not included out of the box. These instructions also cover how to make an email address in a menu turn into an envelope icon.<\/p>\n

Working with Menu Locations<\/h2>\n\nNavigate to Customizer <\/b>→ Menus<\/b><\/li>\n

Add Custom Social Media Icons<\/h3>\n
BoldGrid Crio also allows you to add custom social media icons<\/a> like TikTok that are not included out of the box. These instructions also cover how to make an email address in a menu turn into an envelope icon.<\/p>\n