How to Set up Navigation

Overview

Adding Navigation to the Pro theme header builder consists of two steps:

1. Adding the navigation menu in WordPress
2. Adding navigation element into the header builder

How to add a Navigation Menu in WordPress

To add a navigation menu on WordPress follow the steps below:

1. Go to WordPress Dashboard > Appearance > Menus.
2. Click Create a new menu link.

3. Enter a name for the menu and click Create Menu button.

4. Use the left pane to add pages, posts or custom links to the menu.

5. Click each menu item to change the characteristics of that menu item.

How the Navigation Works in Header/Footer Builder

The second step to add a navigation to your website is to go to WordPress Dashboard > Pro > Headers and select the header in question. You can use the navigation specific elements to add a menu into the header builder.

Which Elements to Use for the Navigation in the Header/Footer Builder

There are navigation menu specific elements available in the header builder that you can use to add a menu to your website. Here is the list of the Elements that you can use:

• Navigation Inline
• Navigation Collapse
• Navigation Dropdown
• Navigation Layered
• Navigation Modal

Each of those elements has different controls depending on how the element is used. For example, the Navigation Inline element has controls for the main menu items and sub menu items, but the Navigation Collapse element has controls for the toggle icon which is used to open up the menu which is mostly used on mobile devices.

There is a common control among all the navigation-related elements, and that is to select the menu which you have created before using the WordPress Dashboard > Appearance > Menus menu. You can add unlimited elements, thus menus into the header builder.

How to Set Mobile Menu in the Header/Footer Builder

The typical element which you can use to add a menu is the Navigation Inline element. The Navigation Inline element is more suitable for the desktop or laptop screens sizes. The smaller screen size devices such as tablets and mobiles are better to use other elements such as the Navigation Collapsed or Modal elements.

You need to add both the Navigation Inline and Navigation Collapse elements and use the hide content by device size feature of those elements to hide one for the desktop view and the other for the desktop views. This is how you can cater to all the devices and screen sizes.

You can use the same Navigation Elements also in the Footer Builder. The only exception is the Navigation Inline element which can show only linear menus and not the submenus.

Summary

We've talked about setting up the navigation in Pro theme with the combination of the built-in WordPress navigation menu feature and the Pro Header/Footer builder navigation specific elements. Finally, we've discussed the trick you can use to cater to the mobile devices when it comes to laying out the navigation menu.