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 menu.
You can manage menu items from an easy to use interface inside your WordPress admin area.
If you’re just looking to add navigation menus on your website, then simply follow our beginner’s guide on how to add a navigation menu in WordPress.
The goal of this tutorial is to help DIY / intermediate users add custom navigation menus to their WordPress themes.
We’ll be covering the following topics in this article:
- Creating a custom navigation menu in WordPress themes
- Displaying custom navigation menu in WordPress theme
- Adding a custom navigation menu in WordPress using SeedProd
- Adding a custom navigation menu in WordPress using Beaver Builder
- Creating mobile-friendly responsive menus in WordPress
- More things you can do with WordPress navigation menus
Having said that, let’s take a look at how to add custom WordPress navigation menus in your theme.
Creating Custom Navigation Menus in WordPress Themes
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.
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
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:
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
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.
<?php
wp_nav_menu( array(
'theme_location' => '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 menu by adding custom CSS code. Here is a sample CSS to help you get started:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
To learn more about styling a navigation menu, see our detailed tutorial on how to style WordPress navigation menus
Adding a Custom Navigation Menu in WordPress Using SeedProd
This method is a lot easier and is recommended for all users. Instead of writing code, you can add a custom navigation menu using a drag and drop builder.
To do this, we’ll be using SeedProd. It is the best WordPress page builder plugin on the market and allows you to easily create custom pages for your website.
It comes with beautiful templates that you can use as a starting point. After that, you can just drag and drop elements to edit the design to your own style.
First, you need to install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to enter your plugin license key. You can find this information under your account on the SeedProd website.
Next, you need to head over to SeedProd » Pages page and click on the Add New Landing Page button.
You’ll then be asked to select a template to use a starting point for your design. Simply click on a template to select it.
You’ll be asked to provide a title for your page and click on the ‘Save and Start Editing the Page’ button to continue.
This will launch the page builder interface with a live preview of your page. You can simply point and click on any item to edit and change it.
To add a custom navigation menu, simply drag and drop Nav Menu block from the left column to your page.
After that, you need to choose which menu you want to display here. You can also adjust font size, alignment, and turn on the mobile menu as well.
Tip: You can create new menus by going to Appearance » Menus page if needed.
Next, you need to switch to the Advanced tab. From here, you can customize menu colors, typography, and other advanced options.
Once you are satisfied with your navigation menu you can save your changes or publish your page. You can then preview the page to see it in action.
Adding a Custom Navigation Menu in WordPress Using Beaver Builder
This method is also helpful for users creating custom pages for their website and need a no-code solution.
First, you’ll need to install and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.
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.
We have a detailed step by step guide on how to make mobile-ready responsive WordPress menus.
Do More With WordPress Navigation Menus
Navigation menus are a powerful web design tool. They allow you to point users to the most important sections of your website.
WordPress allows you to do a lot more than just displaying links in your menu. Try these useful tutorials to extend the functionality of navigation menus on your WordPress site.
- How to add image icons with navigation menus in WordPress
- How to add conditional logic to menus in WordPress
- How to add menu descriptions in your WordPress theme
- How to add a fullscreen responsive menu in WordPress
- How to add a mega menu to your WordPress site
That’s all, we hope this ultimate guide helped you learn how to add a navigation menu in WordPress. You may also want to see our list of 25 most useful WordPress widgets, and our list of the must have WordPress plugins.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Shubham Kumar says
How can create that menu sticky, I use the first method ie. to paste the code in theme’s header.php, now I would like to sticky that element if the user scrolls to from that menu location.
Amit Singh says
I created two menus. One in left of logo and other in right. Now I want to add sub menu. I m just dragging menus under parent but it’s not working. Do you have any article explain how we can add custom submenu
WPBeginner Support says
Not at the moment but we will certainly take that into consideration for future articles.
Admin
Mohit says
Keep doing the great work
WPBeginner Support says
Glad you continue to enjoy our content
Admin
Saurabh says
my menu is not display in header. it display below the page title
WPBeginner Support says
You may need to modify where the code is inserted in the template but if you reach out to your current theme’s support they should be able to let you know where the header is added in their theme.
Admin
ian says
hello
why can’t i see the menus page of my website?
the layout of the tutorials look absolutely nothing like my screen
thanks
WPBeginner Support says
Is your site a WordPress.com site? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
krishna says
hello
i want to add my own html for header
how can i do that ?
Mukeshwar Singh says
Hey, I am using Magazine Pro and There is no option of Custom Menu in Widgets Area!! I Used your code to create a Custom Menu but I need help because there is no option of Custom Menu in the Widget area because of Which I cannot Drag and drop that into the footer area… Please help me
Elle says
Hey! I completed the tutorial and I’ve been able to add the menu to my desired location on my site. I’ve styled it and everything. PROBLEM: The menu appears on page refresh for a moment I can even click it! However, it quickly disappears behind my header. It’s not clickable after it disappears. My brain’s exploding trying to figure this one out!!
Furqan says
Hi
First I create the add menu with a name my custom menu and its perfectly fine and proper fetch and then I changed its name to footer menu after changed its name custom navigation not fetch what the reason
Himanshu says
Just one ques : what should I do with the existing navbar of WordPress . How to delete it.
karima says
Hi, Friend of mine has a problem, well several, she has the horizontal header nav bar but also a vertical one next to it which is obscuring the page content , it appears when you start to scroll on the home page but is fixed on all the content pages.. can someone look please and advise, also there is an error notice we can´t find how to get rid of, any help please appreciated.
sudhakar says
how to remove default slider any theme and how to add our new slider model in homepage
Imran says
I have a custom header built for wordpress when had menu items hardcoded, How can i use the wordpress menu in the header instead of the hardcoded menu ?
cheryl says
I am fairly new to wordpress however I would like to edit a custom menu that we have created as something appears wrong within the menu.
How do i do this?
Manu says
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain says
Helpful article. I am a WordPress user and this tips will help me to add custom navigation menus. Thanks for sharing.
Daniel Keith says
Hi there,
Great tutorial. How can I apply CSS to this custom menu?
Though this is a great way to add multiple menus but without proper CSS the website look odd.
Zaheer Abbas says
I m creating my word press theme but menu and widget is not showing in admin panel ???
is it built in features in word press or i have to create menus and widgets with code plz guide
Tabitha says
How can I make my drop down menu into columns? My current drop down is too long.
Aakash Salunke says
I’m little bit advanced user. My theme supports only one menu. But I want to add one more menu. I have made it but how can I add?
WPBeginner Support says
First you will need to register the menu location, then you will need to edit your theme files to display your navigation menu.
Admin
bobit says
its worked, thanks for the great post
Aijaz Ansari says
Awsome, tutorial, it really helps a novice like me.
thanks
Victoria says
Thanks for the article!!! I created my new menu.
I have a problem though.
My website has a fixed width, and when I resize the window everything stays in place, exept for the new menu. Min-width is not an option because it’s not exactly the behavior I want.
How can I make it behave the same way as the rest of the contents of the page?
Thanks!
Joey says
THANKS! I was looking a long time for this, never thought it was so simple.
Cory says
i have a crazy old theme that didnt support WP 3.0+ menus. This tutorial was so easy. Took me 3 minutes to bring it a little more up to date. thanks so much.
Jacques Goudreau says
Thanks for the tip! Great tut!
Emma says
Where do you even go to make these changes? I can’t see any of those options under the Theme or Theme Options tabs.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Editorial Staff says
Most themes do support this. Look at Appearance > Menus. This article is for theme designers who want to add this feature in their themes to allow users to add menus from the backend.
Admin
Zoe says
I’ve been trying to add a custom class to a singular custom url (to change the color of just one url) in the Top Nav Menus section, but it just adds my class as an extension of the existing class in the output source code and nothing happens.
Here’s my css code and the source code that is output on my site:
.myCustomClass { color: #FFFF00; }
A one-off colored link
Any suggestions on how to get this to work?
Editorial Staff says
Yes add it like color: #ffff00 !important; in that class. This should do the trick.
Admin
Jeremy Johnson says
I was able to implement these modifications and the custom menu works. However, the css in my chosen theme doesn’t seem to support sub-menus. The submenu item is always visible, mousing over the parent item does nothing, and the parent menu item is as wide as the wider child item which pushes the other menu items farther to the right than they should be. Any suggestions on making the sub-menu act dynamically? I’m fairly new to CSS.
Editorial Staff says
The best place to start would be to take the default Twenty Eleven theme. Use the navigation CSS from there, and start modifying.
Admin
Cedric says
Still looking for a solution for this.
shaunling says
This is just great!
digitfox says
Yeah! its a nice tutorial for me! I am very new to WP! Thanks
PauloNeves says
I need help.
Follow all steps, but in Apparance Panel the option menu not enable.
When select other theme working.
How do enable option menu?
Thanks.
Paulo Neves
wpbeginner says
@PauloNeves You have to add this line in your theme’s functions.php file: add_theme_support( ‘menus’ );
Brad says
Thanks for this! Worked awesomely for me and helped my client a lot! – aptdesign
eeebasic says
That is very helpful me although wordprees 3.3 version released few days ago.
citydan says
I have followed the instructions and this post and the post here (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), and figured out how to get my CSS to make the menu appear correctly, but the child items (sub menu items) are not appearing. I have them set up correctly in the menus editor, but on the site they do not show. They are not hidden by CSS because they are not there in the source code of the page.
Any ideas why my menu sub-items are not showing?
GourabMalla says
Hi,
I have added the custom menu in top navigation but want to know how can I active the “Current Page Class”.
I’m using WordPress 3.2
Thanks
Gourab
DanFlynnDesign says
Thank you! Love how this is all dynamic so the client can edit if needed, plus able to state which is the current page and apply hover effect! EXACTLY what I was looking for!
asharperrazor says
I have tried this many times. I have an old wordpress theme. So old I’m not even sure what version of wrodpress it was written for. Anyway, I can get the functions part to work. I can save the correct menu. I can put the code into other parts of my website, say the footer, although it displays as a hierarchy list and not horizontally.
Won’t display in the top nav menu. Do I need a new theme or is it possible to edit my current theme to allow the new menu function?
Thanks in advance. The website is http://www.asharperrazor.com
JamesGeorge says
I implemented this with NO problems-thank you! I took the “nav menu” code and put it in the div where my client’s theme was calling the list of pages. I basically replaced it with your code from above and uploaded it, and the css kept it in the same style. It looks great and functions perfectly. AWESOME!
ÁlvaroBenavides says
I really need help implementing the CSS of the classes, so please notify when u finish!
Bec says
Great post – thank you!
I have implemented as above and my menu items are showing on site only problem is that each page is empty?!
any ideas?
Editorial Staff says
Sounds like a PHP error. Please validate your PHP to make sure there is no error.
Admin
Joseph McCullough says
Quick and dirty – the way I like my code snippets. Thanks a bunch.
Paul says
I have created custom navigation menus a couple of times. What is weird is that after I create and save them, they appear for a while and then the navigation bar returns to 2 tabs only as if the settings are automatically overwritten. On sites with the same template were I never created a custom bar they display correctly.
Any ideas?
Editorial Staff says
Nope, no clue why it is doing that.
Admin
Narendra Choudhary says
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Reply
Ram says
I have a question on nav menu,
is there any way to add the image to the list of navigation menus..
Thanks,
Ram
Editorial Staff says
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Admin
Ram says
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Thanks,
Ram
Editorial Staff says
Yes it is possible to add different images with the custom menu. The one you are using is not the menu that we are talking about in this article.
Julie @ Inspired to Write says
Can you add code to make it look more presentable (fonts, buttons, size, etc)? If so, can you give me an example and where to put this code? Thanks!
Editorial Staff says
That is a CSS related question. You will have to add the font size in the appropriate classes in the CSS file. We will be doing a writeup on the CSS styles soon.
Admin
Chris says
Question about the menu handling.
I have a menu that is right aligned, so the menu items show up in reverse order.
Is there a way to sort the menu_order in REVERSE?
so: sort_column’ => ‘menu_order’ would have something added to reverse the order.
Thanks!
Editorial Staff says
Just because they are right aligned, shouldn’t make it appear in reverse order. To fix that, you need to change your CSS rather than reversing the hook. Make a container div that is aligned right, and then make the list tags float left.
Admin
Julie says
Have followed instructions but after creating menus and adding appropriate categories to use, I can’t see them in my nav bar – any ideas what I have done wrong?
Editorial Staff says
Have you pasted the codes in your header.php or wherever that menu should appear?
Admin
dan says
You also need to add this to your functions.php file in order for you to use the menus
register_nav_menus( array(
‘primary’ => __( ‘Main Navigation’, ‘twentyten’ ),
) );
Editorial Staff says
Certainly a thing that you should have when releasing free themes, but for custom themes it all depends on what you need. Sometimes you don’t have to register locations.
Admin
errr says
i’m soooo not following … could u be more clear where i would plug this code (add_theme_support( ‘menus’ );) into the functions.php file?
i’m totally lost
Editorial Staff says
Somewhere within the php tags. If you do not have PHP experience, we recommend you hire a professional.
Admin
BanyanTree says
If you are going to write articles for newbies, it follows you should answer simple questions. Otherwise, just pay for ads to push your business and save the pretense.
wpbeginner says
@BanyanTree Adding codes to functions.php file is not that hard. You paste it within the php tags. We have written an articles like this:https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ But its just impossible to link to that one article from all of our articles. When someone asks you how do I change the background in CSS and you tell them that you add background: #000 or another hexcode in the CSS property thats help enough.Now if they ask where in the CSS file I paste that, then that is something you need to know before hands. This site is not a PHP for Dummies site or CSS for dummies site. We do our best to help as much people as possible for FREE.
BanyanTree says
@wpbeginner@BanyanTree You don’t need to link to articles, no one asked for that. Three words answers his question; “at the end,” which is easier to type than a snide remark. Keep in mind, you named your site; “wpbeginner,” and if that’s the audience you seek, cater accordingly.
wpbeginner says
@f1mktsol Yes and the site has grown beyond the audience we initially started with. This site has evolved. That is why we have categories… The word “beginner” is being used on a relative scale.
We have articles for Very Newbies who are just users in our Beginners Guide Category… We also have articles in our WordPress plugins category that are catered to that audience.If you are in our WP Themes category, then the articles are written for beginning theme developers. They are beginners in the developer area. Same with the tutorials.
Hope that explains it.
f1mktsol says
@wpbeginner If you’ve outgrown your name, you should change it to suit the audience you seem to prefer. Consider consulting a professional.