Custom navbar theme in WordPress

Solution:1

You need to register a menu:

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Then you need to add it to your theme:

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

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

And add the CSS under custom-menu-class.

There’s a lot more detail here: http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

The actually entries in the menu to different pages would be managed by the menu editing tool in the admin interface.

If you don’t care about editing the menu, you could just add the menu code you’ve pasted directly into your theme.

Solution:2

Navigation menus are a feature of WordPress themes. Each theme can define its own menu locations and menu support.

To add a custom navigation menu, the first thing you need to do is register your new navigation menu by adding this code to your theme’s functions.php file.

You can now go to Appearance » Menus page in your WordPress admin and try to create or edit a new menu. You will see ‘My Custom Menu’ as theme location option.

Tip: If you want to add more than one new navigation menu location, then you would need to use a code like this:

Once you have added the menu location, go ahead and add some menu items in the WordPress admin by following our tutorial on how to add navigation menus for beginners.

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 you want.

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

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.