The theme comes with one menu, which appears to the left, right, or center below the logo depending on your Theme Options. To add items to the menu, we use WordPress’ built-in Menus and a custom navwalker that applies all of the necessary Bootstrap classes for making our navigation responsive on all devices.
To create a new navigation, or use an existing navigation from an XML content import from one of our theme demos, do the following:
- Head to the Appearance > Menus section of the WP Admin
- Type a menu name and click Create Menu, or select an existing menu and click Select to edit it
- Now add items from your site. By default, only pages, posts, and custom links show, to be able to see events, portfolios, categories, etc, click on the Screen Options button on the top right of the WordPress Admin and check off the items you’d like to display. You can also display target, css class, and title options, which allows you to add dropdown header labels, divider lines, and make your links open in a new window.
- After adding a few items move items up or down by dragging and dropping them above each other. This changes their order in the frontend as well
- Be sure to add a custom link that’s linked to # to create a dropdown link. Then, drag an item slightly to the right to create a child menu below the custom link to # for it to appear in a dropdown
- Hit Save Menu
- Now you need to assign the menu’s location if you haven’t already using the Theme Options. Click on Manage Locations tab at the top of the page
- Assign the menu you just created to the desired location and hit the Save Changes button
Now you should have a menu working that supports two levels of drop down. There’s a few other things you might want to know about menus, so we’ve expanded upon those in the next sections.
TWO TIERS OF DROP DOWNS
BUT EVEN BOOTSTRAP DOESN’T SUPPORT TWO LEVELS OF DROP DOWN. ZOMG!
-Github Support Thread
Cortex supports two levels of drop down (or tiers if you’re a Canadian swine.) in the menu. Like we mentioned earlier on the Theme Options page, we haven’t even tried to test what will happen if you use a third level. So don’t do it. If you want to have an item be a drop down, you need to click and drag to indent the menu item like in the picture above.
If you imported XML from our demo content, you should be able to assign the default menu to the Main Menu location underneath the Menu Locations heading. If not, you can easily start adding pages, posts, projects, events, portfolios, category page layouts (more on those later) tags, or post formats. To learn more about the Menus section of the WP admin, head over to the official documentation from WordPress. They’re much smarter than us and their docs are snark-free.
We’ve also decided to be like those annoying kids that ruin the curve on tests by going ahead and building in the WP Bootstrap navwalker menu, dropdown-header labels, and line dividers for you to make your menus look even fancier. You can see an example of dropdown headers and divider lines in the Concepts menu on the top of this page. (They even show up on the mobile menu.)
You may also have noticed on the Cafe demo that we included some icons in the menu names–those are all coming from the FontAwesome font library, and if you know a little basic HTML, you can include it in the menu item name and the icons will display on the menu.
Divider lines
To add a line, simply add a custom link, that’s linked to #, and put the word divider in label, and a horizontal line will appear in the color from your Accent Color setting from the Theme Options page.
Dropdown Header Labels
To add non-linked dropdown headers like on many of the demos, do the following:
- Add a custom link, that’s linked to #, and then put in the text you’d like to display as the label.
- Click Add to Menu
- Under Screen Options near the header in the upper right corner, make sure to select Title and/or CSS Class, so you can complete the next step
- After enabling the Title or CSS Class under Screen Options type the word “dropdown-header” without the quotes in either of the two previously mentioned fields and your label will now be a static piece of text and a different color than the links.