How to Add Custom Navigation Menus in WordPress Themes

Do you want to add custom navigation menus in your WordPress theme? Navigation menus are the horizontal list of links displayed on top of most websites. By default, WordPress themes come with pre-defined menu locations and layouts, but what if you wanted to add your own custom navigation menus? In this article, we’ll show you how to easily create and add custom navigation menus in WordPress, so you can display them anywhere on your theme. When Do You Need this WordPress Navigation Menu tutorial? Most WordPress themes come with at least one spot where you can display your site’s navigation links in a…

This will allow us to move on to the next step which is displaying the menu in your theme.

Displaying Custom Navigation Menus in WordPress Themes

Next, we need to display the new navigation menu in your WordPress theme. The most common place where navigation menus are usually placed is in the header section of a website just after the site title or logo.

However, you can add your navigation menu anywhere that you want.

You will need to add this code in your theme’s template file where you want to display your menu.

'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>

The theme location is the name that we selected in the previous step.

The container class is the CSS class that will be added to your navigation menu. Your menu will appear as a plain bulleted list on your website.

You can use the CSS class .custom_menu_class to style your menus. Here is a sample CSS to help you get started:

Upon activation, you need to create a new page or edit an existing one where you would like to add the navigation menu. On the post editor screen, click on the ‘Launch Beaver Builder’ button.

If it is a new page, then you can use one of the ready-made templates that come with Beaver Builder. You can also edit your exiting page right away.

Next, you need to add Menus module and drag and drop it on your page to the place where you want to display the menu.

This will bring up the Menu module settings in a popup. First, you need to select the navigation menu you want to use. You can always create new menus or edit an existing menu by visiting Appearance » Menus page in WordPress admin area.

You can review other settings as well. Beaver Builder allows you to choose custom colors, background, and other style properties for your menu.

Once you are done, you can click on the Save button and preview your menu.

Creating Mobile-Friendly Responsive Menus in WordPress

With the increase in usage of mobile devices, you may want to make your menus mobile-friendly by adding one of the many popular effects.

You can add a slide-out effect (above), dropdown effect, and even a toggle effect for mobile menus.