Working with Menus in BoldGrid Crio

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 name
• Select the Location this menu will be displayed in
• Click Next to begin adding Menu Items

Working with Menu Locations in the Header and Footer

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.

If your screen looks like this, there are no Menu Locations anywhere in the theme.

If your screen looks like this, all of the currently available Menu Locations have a menu assigned.

Either way, you will need to add a Menu Location to the header or footer layout first.

How to Add Menu Items

• Click Add Items
• Choose the type of menu item you want to add by selecting it
• Click the Item to add it to the Menu
• Click Publish to save your changes

Types of Menu Links

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.

Custom Links are links that go somewhere other than to a page, post, category, or tag on your website. The URL is where the user should go after clicking the link. The Link Text is what word(s) show in your navigation menu for this link. Don’t forget to include the http:// at the beginning!

Pages 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 button. The page will be created in your dashboard and immediately added to the menu.

Posts are added the exact same way as Pages.

Categories and Tags 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.

Open a Menu Link in a New Tab

• Start by opening the Customizer, then clicking on Menus.
• Click the gear icon next to the Menu heading to open the Advanced Menu Properties.
• Check Link Target.

• Navigate to the menu that contains the link item you want to open in a new tab.
• Click the dropdown arrow next to that link item and enable Open link in a new tab.

Save and close the Customizer and now your link should open in a new tab.

How to Use Text Links Instead of Social Media Icons

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 to add custom code like shown below. You can add additional unset lines as needed to include additional social media sites.

function bgsc_remove_social_icon($networks){
unset($networks['youtube.com']);
unset($networks['facebook.com']);
unset($networks['twitter.com']);
return $networks;
}
add_filter('boldgrid_social_icon_networks' , 'bgsc_remove_social_icon');

Add Custom Social Media Icons

BoldGrid Crio also allows you to add custom social media icons 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.

Working with Menu Locations

• Navigate to Customizer → Menus
• Scroll down to Menu Locations and click View All Locations

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.

Note: If you need more menu locations, please add one to the header or footer layout first.

To remove a menu, click the menu name and choose the “– Select –” option. Once the menu is removed from the location, you may want to remove the Menu Location from the header or footer layout as well.

Congratulations! You now have the information needed to work with menus in BoldGrid Crio! Next, you may want to work with menu fonts.