WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Showcase» 15 Best Tutorials to Master WordPress Navigation Menus

15 Best Tutorials to Master WordPress Navigation Menus

Last updated on December 9th, 2016 by Editorial Staff
245 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
15 Best Tutorials to Master WordPress Navigation Menus

Are you looking for the best tutorials to work with WordPress navigation menus? WordPress navigation menus allow you to easily customize and manage menus on your website. In this article, we will show you the best tutorials to master WordPress navigation menus.

Best tutorials to master WordPress navigation menus

Since this is a lengthy article, we have added a list of contents for easier navigation.

  1. Getting Started with WordPress Navigation Menus
  2. Add Social Media Icons to WordPress Menus
  3. Show Different Menus to Logged In Users in WordPress
  4. Add Conditional Logic to Navigation Menus
  5. Styling WordPress Navigation Menus
  6. Add Image Icons with Navigation Menus in WordPress
  7. Add Custom Navigation Menus in WordPress
  8. Add Slide Panel Menu in WordPress Themes
  9. Creating a Mobile Ready Responsive WordPress Menu
  10. Add a Fullscreen Responsive Menu in WordPress
  11. Adding Description with Navigation Menus in WordPress
  12. How to Add Topics in WordPress Navigation Menus
  13. How to Add Navigation Menus in WordPress Sidebar
  14. Add WordPress Navigation Menu in Posts and Pages
  15. Add NoFollow Links in WordPress Navigation Menus

1. Getting Started with WordPress Navigation Menus

In web design, navigation menu is a list of links that allows your website visitors to visit different pages and sections on your website. It helps users navigate around your website, hence the name navigation menu.

Navigation menu

WordPress comes with a built in tool that allows you to create and use menus on your website. This tool is located at Appearance » Menus page in your WordPress admin area.

Creating and managing navigation menus in WordPress

Here you can create menus by adding items from left hand column to the right. You can add any WordPress post, page, categories, and custom links to your menus.

For detailed instructions see our beginner’s guide on how to add navigation menus in WordPress.

2. Add Social Media Icons to WordPress Menus

WordPress menus can also be used to add social media buttons to your website. This allows you to easily update icons, rearrange them, and add new social media icons whenever you want.

The easiest way to do this is by using the Menu Social Icons plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, head over to Appearance » Menus page. Create a new social menu and then on custom links tab from left column.

Adding social menus

You will see the social media icons below the link text and URL fields. All you need to do is click on a social media icon and enter your social profile URL. When you’re done, click on add to menu button.

Repeat this process for all social media profiles that you want to add. Once you are done select a menu location and then click on the save menu button.

For more detailed instructions see our guide on how to add social media icons to WordPress menus.

3. Show Different Menus to Logged In Users in WordPress

If you run a WordPress membership site, then you may want to show different menus to your logged in users. Here is how you can easily achieve this.

First you need to create two different menus. One for your logged in users and one for users who are not logged in. You can name these menus logged-in and logged-out.

Next, you need to add this code to your theme’s functions.php file or a site-specific plugin.

function my_wp_nav_menu_args( $args = '' ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

That’s all. You can now test your navigation menus in action.

For more detailed instructions see our tutorial on how to show different menus to logged in users in WordPress.

4. Add Conditional Logic to Navigation Menus

Want to change menus based on certain conditions? Like a different menu on homepage, or hiding an item on single posts. Here is how you can achieve this in WordPress.

First you need to install and activate the If Menu plugin.

Upon activation, visit Appearabnce » Menus screen and click on a menu item that you want to edit. You will notice a new option to ‘Enable conditional logic’.

Conditional logic option for a menu item

Checking this option will show you two drop down options. You can select show or hide for a menu if it matches the certain conditions. For example, hide menu item if a user is an admin or show a menu item only if a user is vewing a single post.

For more detailed instructions see our article on how to add conditional logic to WordPress menus.

5. Styling WordPress Navigation Menus

Your WordPress theme controls the appearance of navigation menus on your website. Using CSS you can customize the appearance of navigation menus.

The easiest way to do this is by using the CSS Hero plugin. It is a premium WordPress plugin that allows you to customize any WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

You can also style your navigation menus by manually writing CSS. For detailed instructions, see our guide on how to style WordPress navigation menus.

6. Add Image Icons with Navigation Menus in WordPress

Image icons in navigation menus

Many popular websites using image icons next to their navigation menus to make them more noticeable. Here is how you can add image icons with navigation menus in WordPress.

First, you need to install and activate the Menu Image plugin. Upon activation, go to Appearance » Menus. There you will see an option to add images with each item in your existing menu.

Adding image to a menu item in WordPress

You can also use CSS to add image icons. For detailed instructions, see our guide on how to add image icons with navigation menus in WordPress.

7. Add Custom Navigation Menus in WordPress

Most free and premium WordPress themes come with pre-defined locations to display your navigation menus. However, you can also add custom navigation menus to your themes.

First you will need to 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' );

This code will create ‘My Custom Menu’ for your theme. You can see this by editing a menu on Appearance » Menus page.

Theme location for your custom menu

To display your custom menu, you will need to add this code to your theme where you want to display the menu.

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

For more detailed instructions, see our article on how to add custom navigation menus in WordPress themes.

8. Add Slide Panel Menu in WordPress Themes

A slide panel navigation menu in WordPress

Want to show your site’s navigation menu is a slide-in panel? Using slide in panels makes your menus more interactive, less intrusive, and fun specially on mobile devices.

However, in order to add them you will need medium level understanding of JavaScript, WordPress themes, and CSS.

For step by step instructions, see our guide on how to add a slide panel menu in WordPress themes.

9. Creating a Mobile Ready Responsive WordPress Menu

Mobile responsive navigation menu in WordPress

Most WordPress themes are responsive and come with mobile-ready navigation menus. However, if your theme doesn’t handles navigation menus well on mobile devices, then it affects user experience on mobile devices.

Luckily, there are some easy ways for you to add mobile ready responsive menus without writing any code.

First, you need to install and activate the Responsive Menu plugin.

Upon activation, you need to click on ‘Responsive Menu’ in your WordPress admin bar to configure plugin settings.

Simply select a width after which mobile responsive menu should be visible. After that you need to select an existing navigation menu.

Don’t forget to click on ‘Update Options’ button to store your settings. That’s all you can now visit your website and resize browser screen to see the mobile responsive menu.

There are many other ways to add a mobile responsive menu. Like a menu that appears with a toggle effect, a slide in menu, and responsive select menu. Learn more about all of them in our guide on how to create a mobile-ready responsive WordPress menu.

10. Add a Fullscreen Responsive Menu in WordPress

Fullscreen responsive menu in WordPress

Have you noticed how some popular websites use a fullscreen navigation menu? Usually it requires some creative use of JavaScript and CSS. Luckily, you can do this in WordPress without writing any code.

First, you need to install and activate the DC – Full Screen Responsive Menu. Upon activation, you need to visit Appearance » DC Fullscreen Menu page to configure the plugin settings.

Fullscreen menu settings

Here you can choose a menu, background and text color, and Google font for your fullscreen menu.

Click on the submit button to store your settings. You can now visit your website to see your fullscreen responsive menu in action.

For more on this topic, see our guide on how to add a fullscreen responsive menu in WordPress.

11. Adding Description with Navigation Menus in WordPress

WordPress navigation menus are usually just text links showing the link label or anchor text. What if you wanted to add a little description or tag line for each item in your navigation menu?

Luckily, WordPress comes with built-in functionality to add description with every item in your navigation menus.

First, you will need to enable the descriptions item. Click on the Screen Options button at the top right corner of the screen.

This will show a list of boxes and options that you can enable. You need to check the box next to Description.

Enabling description field for navigation menus in WordPress

Now scroll down and click on a menu item to edit it and you will see an option to add description.

Description field added to menu items

Add your description and click on the save menu button.

If your theme supports menu descriptions, then you will be able to see them right away. Otherwise, you will have to edit your theme files to show descriptions.

For detailed instructions, see our guide on how to add menu descriptions in your WordPress theme.

12. How to Add Topics in WordPress Navigation Menus

Displaying blog topics in WordPress navigation menu

We are often asked about how to add blog topics to navigation menus in WordPress. Many beginners assume that they need to create pages for each topic in order to add them to menus.

What you actually need is categories. Categories and tags are built in WordPress taxonomies which allow you to sort content into relevant topics.

Add your articles into relevant categories and then head over to Appearance » Menus page. Click on the categories tab to expand it and then select the categories that you want to display in your navigation menus.

Adding categories to navigation menus in WordPress

For more details, see our article on how to add topics in WordPress navigation menus.

13. How to Add Navigation Menus in WordPress Sidebar

WordPress themes usually have navigation menus on the top or bottom. However, you can also create and add menus into your WordPress sidebar as well.

Simply visit Appearance » Widgets page and add ‘Custom Menu’ widget to your sidebar. For detailed instructions, see our guide on how to add and use widgets in WordPress.

Adding navigation menu to sidebar widget

After adding the widget to a sidebar you can select a menu from the drop down option. Don’t forget to click on the save button to store your settings.

14. Add WordPress Navigation Menu in Posts and Pages

Usually navigation menus are shown in the header or sidebar of a website. However, sometimes you may want to add a menu inside a WordPress post or page. Here is how you would do that.

First, you need to install and activate the Menu Shortcode plugin. Upon activation, edit the post or page where you want to display your menu and add this shortcode:

[listmenu menu="Your Menu Name"]

Don’t forget to replace ‘Your Menu Name’ with the name of your own navigation menu. Save or publish your post and then click on the preview button.

For more details, see our guide on how to add WordPress navigation menu in posts or pages.

15. Add NoFollow Links in WordPress Navigation Menus

Typically, your site’s navigation menu contains links to your own posts and pages. However, sometimes you may need to add a link to an external site.

Many SEO experts recommend adding rel=”nofollow” attribute to external links. Here is how you will add nofollow attribute to links in WordPress navigation menus.

First, you need to visit Appearance » Menus page and then click on Screen Options button at the top right corner of the screen.

Check target and link relationship boxes in Screen Options

This will bring down a menu where you need to check the boxes next to Link Relationship (XFN) and Link Target options.

Now click on the menu item you want to edit. You will notice two new options, Link Relationship and Open link in a new window/tab.

Adding nofollow to a menu item

You need to enter nofollow in the link relationship option. You can also check the open link in new window/tab option if you want.

Click on the save menu button to store your changes. Now this particular link in your WordPress navigation menu will have rel=”nofollow” attribute added.

For more detailed instructions, see our tutorial on how to add nofollow links in WordPress navigation menus.

We hope this article helped find the best tutorials to master WordPress navigation menus. You may also want to see our list of 24 must have WordPress plugins for business websites.

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.

245 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

1 Comment

Leave a Reply
  1. ERFmama says:
    Apr 7, 2017 at 4:25 pm

    Thank you so much for a fantastic overview! I’ve learned a few new things! :D :D

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Pixelemu
Pixelemu Coupon
Get 15% OFF on Pixelemu WordPress themes and plugins.
AccessPress Themes
AccessPress Themes Coupon
Get 15% off on AccessPress Themes collection of premium WordPress themes and plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.