I’m Booking projects for 2019!😉  Brand Design Brand & Web Design

How to Create a Navigation Menu in WordPress - MintSwift

How to Create a Navigation Menu in WordPress

When I look back several years ago, I still remember my confusion when it comes to the navigation menus in WordPress. I’ve created different pages, added blog categories, but when I noticed that none of them was visible in the menu navigation bar. I assumed that they’ll automatically be added just below my logo, but they weren’t.

Today, I wanted to save you the confusion and show you how to create a navigation menu in WordPress, so all of your pages or blog categories (if you want to have them in the menu) can be easily accessible by your blog visitors. Let’s dive in, shall we?!

TYPES AND LOCATIONS OF THE NAVIGATION MENU:

There are several types and different places on your website for the navigation menus:

  • Horizontal text-based navigation – the classic, most common navigation menu – I’m using this type on MintSwift’s site
  • Hamburger menu – displayed after the click on the icon that looks like three horizontal lines. Usually used as a mobile menu or full-screen menu (when you click on the icon, the links to the pages are displayed in the middle of the page and there’s a colour overlay covering entire website)
  • Drop down menu – can be used with all of the types. It allows you to add additional, sub-pages
  • Top bar menu – usually menu above the logo or secondary menu at the top of the page
  • Footer navigation – clickable links to pages are displayed in the footer (at the bottom of the website)
  • Sticky navigation – the navigation bar is sticky meaning that when you scroll down the page, it’s still at the top of the page
  • Static sidebar menu – menu with all the pages listed, displayed in the sidebar on the page (on the right or left)

HOW TO CREATE A NAVIGATION MENU IN WORDPRESS

Before you create your navigation menu in WordPress, create pages as I showed you in this post. Then:

HOW TO ADD PAGES IN NAVIGATION MENU

1. Go to Appearance > Menus

How to Create a Navigation Menu in WordPress - 1 - MintSwift

2. Now look for Edit Menus Tab > Create a New Menu > Name it

How to Create a Navigation Menu in WordPress - 2 - MintSwift
How to Create a Navigation Menu in WordPress - 3 - MintSwift

3. On the left you can see all the Pages that you’ve just created, you can either Select All or choose some of them

How to Create a Navigation Menu in WordPress - How to add Pages in Navigation Menu - MintSwift

Unlinked pages –  you can have unlinked pages on your website, meaning that they are public or password protected, so people can visit them, but they AREN’T added to the navigation menu

Example of my unlinked pages: Brand collateral examples page, shop page

CHANGING THE NAVIGATION ITEMS TITLES

If your page title is long (for SEO purposes) you can easily set up a shorter name to be displayed in the navigation menu. Simply click on the arrow and edit the Navigation Label

Example of my changed navigation items: Brand design instead of Brand Design Package

How to Create a Navigation Menu in WordPress - Changing the navigation items titles - MintSwift

Example of my changed navigation items: Brand design instead of Brand Design Package

HOW TO CREATE A DROPDOWN MENU

You can drag and drop the items added on the right, create sub items (which would create a dropdown menu) by dragging the item to the right under the main item

How to Create a Navigation Menu in WordPress - How to create a dropdown menu - MintSwift

HOW TO ADD A BLOG OR PRODUCT CATEGORIES TO THE MENU

If you want to add blog categories/product categories (remember to create them first!) to the navigation menu (like I did for Kingston Craft’s website), instead of Pages, from the sidebar choose Categories

How to Create a Navigation Menu in WordPress - How to add a blog or product categories to the Menu - MintSwift

HOW TO ADD A CUSTOM LINK TO THE NAVIGATION BAR

There might be some instances when you’d like to add a custom link to the navigation menu like the link to external page e.g your Etsy shop or your social media profile. On the right choose Custom Links and add the link and link test there.

How to Create a Navigation Menu in WordPress - How to add a custom link to the Navigation bar - MintSwift

Once you finish setting up your custom menu in WordPress, scroll down to Menu Setting and choose the menu location (this setting might look different on your end since they are theme-dependable) and then click Save Menu.

Now go back to your homepage and see the menu in action! 😉

Where is your navigation menu located on your website?

BRAND & WEBSITE DESIGN PACKAGE

Brand identity, five brand collaterals + WordPress website design

xo Adrianna

Sharing is caring:

Share on pinterest
Share on facebook
Share on twitter
You may also like:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu