In WordPress themes, how do you add custom navigation menus?


Do you want to customize your WordPress theme’s navigation menus? The horizontal list of links at the top of most websites is known as a navigation menu.

WordPress themes come with pre-defined menu locations and layouts by default, but what if you wanted to customize your own navigation menus?

In this article, we’ll show you how to quickly create and add custom navigation menus to your WordPress theme, so you can use them anywhere.

When Do You Need to Know About WordPress Navigation Menus?

Most WordPress themes include at least one area where you can create a menu with your site’s navigation links.

Within your WordPress admin area, you can manage menu items using a simple interface.

If all you want to do is add navigation menus to your website, just follow our beginner’s guide to adding a navigation menu in WordPress.

This tutorial will show you how to add custom navigation menus to your WordPress theme as a DIY or intermediate user.

In this article, we’ll go over the following topics:

  • Using WordPress themes to make a custom navigation menu
  • Using a WordPress theme to display a custom navigation menu
  • Using the page builder in WordPress, create a custom navigation menu.
  • Using WordPress to make mobile-friendly responsive menus
  • You can do a lot more with WordPress navigation menus.

After that, let’s look at how to incorporate custom WordPress navigation menus into your theme.

Using WordPress Themes to Create Custom Navigation Menus

Each theme has the ability to define its own menu locations and support. WordPress themes come with navigation menus.

To create a custom navigation menu, first add this code to your theme’s functions.php file to register your new navigation menu.

You can now try to create or edit a new menu in your WordPress admin by going to Appearance » Menus. As a theme location option, you will see ‘My Custom Menu.’

You’ll need to use a code like this if you want to add more than one new navigation menu location:

Following our tutorial on how to add navigation menus for beginners, add some menu items in the WordPress admin once you’ve added the menu location.

We can now proceed to the next step, which is displaying the menu in your theme.

In WordPress Themes, Custom Navigation Menus Can Be Displayed

The most common location for navigation menus on a website is just after the site title or logo in the header section. The new navigation menu must then be displayed in your WordPress theme.

You can, however, place your navigation menu wherever you want.

You’ll need to paste this code into the template file of your theme where you want your menu to appear.

The name we chose in the previous step is the theme location.

On your website, your menu will appear as a simple bulleted list. The CSS class that will be added to your navigation menu is the container class.

To style your menus, use the CSS class.custom_menu_class. To get you started, here’s a sample CSS:

See our detailed tutorial on how to style WordPress navigation menus for more information on how to style a navigation menu.

Using Page Builder to Create a Custom Navigation Menu in WordPress

Using a WordPress page builder plugin to create a custom landing page or home page layout will make the process a lot easier.

It lets you create any type of page layout with simple drag-and-drop tools (no coding required). The best WordPress page builder on the market is Beaver Builder, which we recommend.

Adding a custom navigation menu to your page layout is also part of this.

The Beaver Builder plugin must first be installed and activated. See our step-by-step guide to installing a WordPress plugin for more information.

After activation, you must either create a new page or edit an existing one to place the navigation menu. Click the ‘Launch Beaver Builder’ button on the post editor screen.

If you’re creating a new page, you can use one of Beaver Builder’s pre-made templates. You can also make immediate changes to your exiting page.

Next, drag and drop the Menus module onto your page to the location where you want the menu to appear.

To begin, choose which navigation menu you want to use. You can always create new menus or edit existing menus in the WordPress admin area by going to Appearance » Menus. This will open a popup with the Menu module settings.

Beaver Builder lets you customize your menu’s colors, background, and other style properties. You can also look over other options.

After you’ve finished, click the Save button to see a preview of your menu.

Using WordPress to Make Mobile-Friendly Responsive Menus

With the rise in mobile device usage, you might want to consider making your menus mobile-friendly by using one of the many available effects.

For mobile menus, you can use a slide-out effect (shown above), a dropdown effect, or even a toggle effect.

We have a detailed step-by-step guide on how to create responsive WordPress menus that are mobile-friendly.

Use WordPress Navigation Menus to Do More

Navigation menus are a useful tool in web design. You can use them to direct users to the most important parts of your website.

You can do a lot more with WordPress than just display links in your menu. Extend the functionality of your WordPress site’s navigation menus with these helpful tutorials.

  • How to use image icons in WordPress navigation menus
  • In WordPress, how do you add conditional logic to menus?
  • How to add descriptions to your menus in your WordPress theme
  • In WordPress, how do I make a fullscreen responsive menu?
  • How to incorporate a mega menu into your WordPress site

You might also be interested in our lists of the 25 most useful WordPress widgets and the must-have WordPress plugins. That’s all there is to it; we hope this comprehensive guide taught you how to create a navigation menu in WordPress.

You can also find us on social media sites such as Twitter and Facebook. Please subscribe to our YouTube Channel for WordPress video tutorials if you enjoyed this article.

    Why is it so important to build an email list today? (6 Reasons)

    How to Fix the WordPress Error Establishing a Database Connection

    How to Transfer Your Blog from WordPress.com to WordPress.org Correctly

    Beginner’s Guide to Installing Google Analytics in WordPress

    Editorial Staff Information

    Over 1.3 million readers around the world rely on it. WPBeginner’s Editorial Staff is a group of WordPress experts led by Syed Balkhi.

    I used the first method, which is to paste the code in the theme’s header.php, but now I’d like to make that element sticky if the user scrolls away from that menu location.

    One is to the left of the logo, and the other is to the right. Now I’d like to create a submenu. I tried dragging menus under the parent, but it didn’t work. I made two menus for you. Is there an article that explains how to create custom submenus?

    Not at the moment, but it’s something we’ll keep in mind for future articles.

    Keep up the good work.

    We’re glad you’re still enjoying our content.

    My menu does not appear in the header. It appears beneath the page title.

    You may need to change the location of the code in the template, but if you contact your current theme’s support, they should be able to tell you where the header is placed in their theme.

    hello there

    Why can’t I see my website’s menus page?

    The tutorials’ layout is completely different from what I see on my screen.

    many thanks

    https://kiuz.it/beginners-guide/free-wordpress-com-vs-self-hosted-wordpress-org-infograph/ Is your website powered by WordPress.com?

    Hello, I’d like to add my own html to the header. How do I do this?

    I used your code to create a Custom Menu, but I need assistance because there is no Custom Menu option in the Widget area, preventing me from dragging and dropping it into the footer area… Please assist me. Hey, I’m using Magazine Pro and the Widgets Area doesn’t have a Custom Menu option!!

    Hello there! Everything has been styled by me. It quickly vanishes behind my header, however. After it vanishes, it is no longer clickable. PROBLEM: For a brief moment, the menu appears on page refresh, and I can even click it! Trying to figure this one out is causing my brain to explode!! I finished the tutorial and was able to place the menu where I wanted it on my website.

    Hello, I first created an add menu with the name my custom menu, which worked perfectly fine and properly fetch, and then I changed its name to footer menu, which did not work.

    How do I get rid of it? Just one question: what should I do with WordPress’s existing navbar?

    Hello there, My friend has a problem, or rather several problems: she has the horizontal header nav bar, but she also has a vertical one next to it that obscures the page content; it appears when you start scrolling on the home page, but it is fixed on all content pages. Please take a look and advise; there is also an error notice that we can’t seem to get rid of; any assistance would be greatly appreciated.

    how to remove any theme’s default slider and replace it with our new slider model on the homepage

    How can I use the wordpress menu in the header instead of the hardcoded menu? I have a custom header built for WordPress with menu items hardcoded.

    I’m new to WordPress, but I’d like to make changes to a custom menu that we’ve created because something appears to be wrong with it.

    How do I go about doing this?

    This is an excellent tutorial! I was able to add a footer menu to a theme that didn’t have one by default in less than 5 minutes. Thank you a lot. This was precisely what I required at this time.

    I use WordPress, and these suggestions will assist me in creating custom navigation menus. This is a very useful article. Thank you for sharing this information.

    Though this is a great way to add multiple menus, the website will look strange without proper CSS. Hello there, this is a fantastic tutorial. How can I style this custom menu with CSS?

    Is it built-in features in WordPress or do I have to code my own menus and widgets? I’m working on a WordPress theme, but the menu and widgets aren’t appearing in the admin panel???

    What’s the best way to turn my drop-down menu into columns? My current drop-down menu is excessively long.

    I’m a more experienced user. I’ve made it, but how do I add to it? But there’s one more menu I’d like to add. Only one menu is supported by my theme.

    To display your navigation menu, you’ll need to first register the menu location, then edit your theme files.

    It worked, and I appreciate your excellent work.

    This tutorial is fantastic; it really helps a novice like me. many thanks

    Min-width isn’t an option because it’s not the behavior I’m looking for. However, I have a problem. My website has a fixed width, so everything stays in place except the new menu when I resize the window. Thank you very much! What can I do to make it behave like the rest of the page’s content? I made a new menu for myself. Thank you so much for the article!!!

    I had been looking for this for a long time and had no idea it was so simple. MANY THANKS!

    Thank you very much. It only took me 3 minutes to bring it up to date. This tutorial was extremely simple to follow. I have an old theme that doesn’t work with WP 3.0+ menus.

    What a fantastic tutorial! Thank you for the suggestion!

    None of those options are visible in the Theme or Theme Options tabs. What are your options for making these changes?

    I’d like to add an Archive menu with a list of all of my blog’s recipes… It should be simple, but it’s proving to be impossible. I use the Buenos Theme, but I can’t find any information on whether it supports these changes on the Buenos theme page.

    Look in the Appearance > Menus section. This is supported by the majority of themes. This article is for theme designers who want to enable users to add menus from the backend by including this feature in their themes.

    I’ve been trying to add a custom class to a single custom url in the Top Nav Menus section (to change the color of just one url), but it just adds my class as an extension of the existing class in the output source code and does nothing.

    Here is my CSS code as well as the source code for my website:

    color: #FFFF00; myCustomClass.myCustomClass.myCustomClass.myCustomClass.myCustomClass.myCustomClass.myCustomClass.myCustomClass.

    A one-of-a-kind colored hyperlink

    Do you have any ideas on how to make this work?

    Yes, use #ffff00 as a color! This ought to suffice. In that class, it’s crucial.

    However, my chosen theme’s css does not appear to support sub-menus. The submenu item is always visible, hovering your mouse over the parent item has no effect, and the parent menu item is as wide as the wider child item, pushing the other menu items to the right of where they should be. I was able to make these changes, and the custom menu now works. I’m still learning CSS. Any ideas on how to make the submenu more dynamic?

    The default Twenty Eleven theme would be a good place to start. From there, start modifying the navigation CSS.

    I’m still looking for a solution.

    This is fantastic!

    This is a great tutorial for me! I’m a newbie to WordPress! Yes, indeed! Thank you.

    Follow all of the steps, but the option menu in the Appearance Panel remains disabled. Thank you. When you choose another theme, it will work. Paulo Neves is a Brazilian footballer. I require assistance. How do I make the option menu appear?

    You must include the following line in the functions.php file of your theme: add_theme_support( ‘menus’ ); @PauloNeves @PauloNeves @PauloNeves @PauloNeve

    Worked wonders for me and greatly aided my client! aptdesign – aptdesign – aptdesign – aptdesign Thank you for your help!

    Despite the fact that Wordprees 3.3 was just released a few days ago, this is very useful to me.

    They are correctly set up in the menus editor, but they do not appear on the website. They aren’t hidden by CSS because they aren’t present in the page’s source code. I followed the instructions in this post and this one (https://kiuz.it/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/) and was able to get my CSS to work correctly, but the child items (sub menu items) are not showing up.

    I’m not sure why my menu sub-items aren’t showing up.

    Hello there,

    I’ve added a custom menu to the top navigation, but I’m not sure how to make the â€Current Page Class†active.

    WordPress 3.2 is the version I’m using.

    Thank you.

    Gourab Gourab Gourab Gourab Go

    I like how this is all dynamic so the client can make changes if necessary, as well as being able to specify which page is currently active and apply a hover effect! I found EXACTLY what I was looking for. Thank you very much!

    I’m not sure what version of WordPress it was written for because it’s so old. I have a wordpress theme that is quite old. Anyway, I think I’ll be able to get the functions part to work. I can add the code to other parts of my website, such as the footer, but it will appear as a hierarchy list rather than horizontally. I’m able to save the proper menu. This is something I’ve tried several times.

    Is it necessary to purchase a new theme, or can I modify my current theme to accommodate the new menu function? It won’t show up in the top navigation menu.

    http://www.asharperrazor.com is the website. Please accept my sincere gratitude.

    I pasted the “nav menu” code into the div where my client’s theme was calling the page list. Thank you for making this so simple to implement! AMAZING! I simply replaced it with your above-mentioned code and uploaded it, and the css maintained the same style. It looks fantastic and performs flawlessly.

    I really need your help with the CSS for the classes, so please let me know when you’re done!

    Thank you for a wonderful post!

    My menu items are visible on the site after I implemented as described above, but each page is empty?!

    Do you have any suggestions?

    Please double-check your PHP to ensure there are no errors. It appears to be a PHP error.

    I prefer my code snippets to be quick and dirty. Thank you so much.

    Do you have any suggestions? What’s strange is that after I create and save them, they appear for a short time before the navigation bar returns to only two tabs, as if the settings are overwritten automatically. I’ve made a few custom navigation menus in the past. They display correctly on sites with the same template where I never created a custom bar.

    No, I have no idea why it’s doing that.

    Each navigation can have its own custom classes, and then a background image can be added. If you want to get rid of the Menu text, you can use the CSS (text-indent) property. remark

    I have a nav menu question: is there a way to include an image in the list of navigation menus?

    Thank you, Ram.

    Each navigation can have its own custom classes, and then a background image can be added. If you want to get rid of the Menu text, you can use the CSS (text-indent) property.

    I’m using wp_list_categories(‘exclude=4,7&title_li=’); to display the navigational menu; is there any way to add different images to each menu button? Thank you for your response, but I need that custom menu image for WordPress to be more clear. I’ve tried CSS before, but it’s never worked for me.

    Ram is a character in the film Ram Thank you,

    Yes, you can use the custom menu to add different images. The menu you’re using isn’t the one we’re discussing in this article.

    If that’s the case, could you give me an example and where I should put this code? Is it possible to add code to make it more presentable (fonts, buttons, size, and so on)? Thank you very much!

    The font size must be specified in the CSS file’s appropriate classes. We’ll be writing a post about CSS styles soon. This is a CSS-related inquiry.

    I have a question about how the menus are handled.

    I have a right-aligned menu, so the menu items appear in reverse order.

    Is there a way to reverse the menu_order sort?

    As a result, sort_column’ => ‘menu_order’ would have something to reverse the order.

    Thank you very much!

    Rather than reversing the hook, you’ll need to change your CSS to fix this. It shouldn’t appear in reverse order just because they’re right aligned. Make a right-aligned container div, then make the list tags float left.

    I followed the instructions, but I can’t see my menus in my nav bar after creating them and adding appropriate categories to use – I’m not sure what I did wrong.

    Have you copied and pasted the codes into your header.php or wherever you want the menu to appear?

    In order to use the menus, you must also add this to your functions.php file.

    register_nav_menus( array( array( array( array( array( array( array( array( array(

    It is not always necessary to register locations. When it comes to free themes, this is definitely something you should have, but when it comes to custom themes, it all depends on what you need.

    Could you please explain where in the functions.php file I should put this code (add_theme_support( ‘menus’ );)? I’m not following you at all…

    I’m completely befuddled.

    Within the php tags, to be precise. We recommend hiring a professional if you don’t have any PHP experience.

    Otherwise, just buy ads to promote your company and avoid the pretense. If you’re going to write articles for beginners, you should be able to answer basic questions.

    Now, if they ask where I paste that in the CSS file, that’s something you’ll need to know before hand. We make every effort to assist as many people as possible for no cost. It’s pasted between the php tags. It’s not difficult to add codes to the functions.php file. This is an example of an article we’ve written: When someone asks how to change the background in CSS, simply telling them to add background: #000 or another hexcode to the CSS property will suffice. This isn’t a PHP for Dummies or a CSS for Dummies website. beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ https://kiuz.it/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ But linking to that one article from all of our articles is simply impossible. @BanyanTree @BanyanTree @BanyanTree

    No one asked for you to link to articles, so don’t do it. “At the end,” which is easier to type than a snide remark, is the answer to his question. Keep in mind that your site’s name is “wpbeginner,” so if that’s the audience you’re after, cater to them. @[email protected]

    That is why we have classifications… Yes, and the site has grown beyond the initial target audience. This website has changed over time. @f1mktsol @f1mktsol @f1mktsol On a scale of one to ten, the term “beginner” is used.

    They are new to the developer world. In our Beginners Guide Category, we have articles for Very Newbies who are just users… If you’re looking for articles about WordPress themes, you’ve come to the right place. The tutorials are the same way. We also have articles tailored to that audience in our WordPress plugins category.

    I hope this clarifies things.

    WordPress Beginner @wpbeginner You should change your name if you’ve outgrown it to appeal to the audience you seem to prefer. Consider seeking advice from a professional.

kiuz
Logo
Enable registration in settings - general