How to Change the Navigation Bar Items

UPDATE: 4th REVISION SEPTEMBER 2019

Changing your navigation bar items in WordPress is easier than you think – once you know where to look! In this article I’ll show you how to get exactly the pages and links you’d like – into that navigation bar. You can also find some tips for changing the titles or links only and best practices on naming your pages, menus and links. First – let’s look at creating a new menu.

Blog Navigation for WordPress

In WordPress, the navigation is completely separate from the pages and posts. Did you get that? Just because your page is called “My Story to Blogging Fame” doesn’t mean your menu has to use the same name. Instead, I would highly recommend “About”. Simple = better!

As long as you keep in mind that you’re not limited by page or post titles, you’ll have the freedom to create the navigation that serves your readers.

How to Change Items in the Navigation: Creating a new menu

Here’s a video walk through of exactly the same steps that are outlined below in text and images.

1. Go to Appearance – > Menus tab

2. Click on Manage Locations. If there are places built into your theme you will see them here.Menus ‹ WordPress Barista — WordPress

3. Go to Edit Menus.

4. Create a new Menu.

Menus ‹Add New

5. Give it a name, and then drag Pages, Posts, etc into the Menu Structure Box. Re-order as needed. Save.

6. Go back to Manage Locations and assign your newly named Menu to a location.

Changing the Title of a Navigation Item

On this site, we have a page called “What they say”… that isn’t terribly clear that it is a page of testimonials. So in the navigation it is referred to as ‘testimonials’. Here is how we accomplished that:

  1. Add the page “What they say…” to the menu.
  2. Using the drop-down change the Title Attribute to “Testimonials”
  3. Save.

Changing the Link of a Navigation Item

Let’s say you have a great title: “Shop” but your shop is on another site! This is how you would add that Shop link to your WordPress navigation:

  1. Under “Custom Links”, copy and paste your shop link into the URL place. Paste the entire link to your shop, including https://www.yourshop.com
  2. Change the Link Text to “Shop”.
  3. Save.

Best Practices for WordPress (or any) Navigation

Any website has only a few seconds to make a first impression. The first principle of navigation is ease of use: it must be easy to find and use. The second principle for navigation bars is predictability.

[socialpug_tweet tweet=”The first principle of navigation is ease of use: it must be easy to find and use.” display_tweet=”The first principle of navigation is ease of use: it must be easy to find and use.”]

Ease of use

To make your navigation easy to use, use simple titles. Although you may have cute creative names for your pages, it is best to use clear concise words.

The navigation bar should always be top of the site and/or bottom of the page. It needs to be on every page. On mobile it can be represented by 3 small horizontal bars, otherwise known as a ‘hamburger’ menu. Or you can use a simple word “menu” with a downwards facing arrow.

TIP: always remember to design your mobile experience for ‘big man fingers’. The buttons and links need to be far enough apart for the biggest of fingers. Google loves a well designed navigation experience!

Predictable

[socialpug_tweet tweet=”You may have a cute ‘About’ page title, but in the navigation it should always say ‘About’ #blogging” display_tweet=”You may have a cute ‘About’ page title, but in the navigation it should always say ‘About’ #blogging”]

Just like the ease of use principle, this means you need to use clear concise language. You may have a cute “About” page title, but in the navigation it should always say “About”. Other items that should always be in your navigation bar:

  • Home
  • About
  • Contact
  • Blog or Services or Shop – depending on your purpose

Less is more at this point!! Have you heard of the paradox of choice? When presented with too many choices most people will make no choice at all. Give them a reasonable number of choices: 4-6 max.

Here’s a client’s take on her hesitancy to remove options:

I just wanted to say thank you… I was skeptical but followed your advice – and have made several conversions!!! ~ Suzy (Emptynestblessed.com)

Troubleshooting

  1. How do I get a new menu location?
    Locations are created by your theme developer. If you want to try a bit of theme editing you can find a tutorial here.
  2. My theme docs refer to adding a “Class”, but I don’t see that anywhere!
    Some items are hidden by default. Use the “screen options” tab in the top right to select any additional items you’d like displayed.
  3. I can’t see any WooCommerce categories to add to my navigation – where are they?
    Some items are hidden by default. Use the “screen options” tab in the top right to select any additional items you’d like displayed.
  4. How do I change the styles or colours?
    The customizer sometimes has a few options for colours. Other than that, you’ll need to get your toes into CSS tutorials.

Similar Posts

20 Comments

  1. Hi Cathy, Great article once again!

    It’s easy to forget how straightforward editing menu items in WordPress is, your article definitely breaks it down and makes it easy to understand.

    Thanks

    Isaac

    1. Absolutely! It is either CSS or using the customizer (from Appearance tab). Which one depends on which theme you’re using. If you need a hand, just email [email protected] to submit a ticket. Thanks for stopping by!

  2. Thank you for the information, however, I do have a question or two. From the description, you would nee to have pages named whatever you want on your Nav bar, right? So that when you dragged the pages you want into your nav bar, it automatically writes the hyperlink to those page, right? My questions is this; if I have a current link named “Shop” and I wanted to change that text to Digital Downloads and Lifestyle Products (really long, I know) would I be able to do this also? But if I do not have this page listed in my pages, do I create a dummy page and then follow your directions? Since this new “page” is not really a page, I can redirect the hyperlink to whatever I want it to be right?

    Thank you for all of your expertise and any help you can throw my way would be GREATLY appreciated! I am trying to get this modification done without have to pay our Webmaster her exorbitant fee.

    By the way, I am VERY reluctant to do this since it is my wife’s Website and she would kill me if I made it go down. Thanks!

    By the way, if there is a way I can edit the current Nav bar without creating a new one, that would be SO much better! Thank you!

    1. Yes – you can have a page named Whatever. And add it into the navigation (through Appearance > Menu), and then in the “Title” field, add “Shop” or whatever name you prefer. Does that make sense?

      1. Hi Cathy and thank you so very much for responding! Is there a way to just modify the current nav bar instead of creating a totally new one? That would be so much more safe to me and would most likely keep my relationship with my wife (the Website owner) on a more even keel. If so, would you know where that nav bar might be stored? Thank you again so much for your help. Mike

        1. If this is an up to date WordPress install, the navigation bars should all be under Appearance > Menus. You select the current menu which one from the dropdown. The only exception to this is if the theme author is using a page builder – some page builders have changed the location of menus and most other items too. You’ll have to submit a ticket if you’re dealing with that. I can’t help without seeing it. I hope you can find it in the usual spot! Otherwise, we’re here to help!

  3. After I change the text of the navigation item how do I change the link in the navigation item?

    1. The link will always be the same… unless you use a “Custom Link”. If you drag a custom link from the left hand side into the navigation menu, you can select the link and title. Does that answer your question?

  4. Hi Cathy! I’m currently trying to change the navigation menu for my website, but I can’t find the tab “Appearances” in the main WordPress side menu. Has the same menu been buried somewhere else in the current version?

    1. Hi Phillip!

      If you’re logged in as the admin, you should see it. Unless your site has been customized by a developer – and that is really customized to remove a main tab like that!

  5. Hi Cathy, thank you very much for this useful article!
    I followed all the steps and I have now my pages with names and location as I want them, but I would like to change how they appear when the mouse goes over the navigation bar. For example, if I have page A with subpage B that has another subpage C, when I put my mouse on the menu bar where it says page A, I see the automatic dropdown menu showing me page B and its subpage C… How can I customize that? I would like to see only subpage B and having to go with the mouse over page B to see subpage C. Sorry for the awful attempt at an explanation, but I am looking for help desperately ;D

    1. Hi Valentina,

      I think I understand! In the first screenshot, it is like you want the 2nd sub-item to be in a sub-menu (fly-out) menu C.

      To do that, just drag the C-menu items so they are beneath and indented to the right of B-menu. Let me know how that works!

Leave a Reply

Your email address will not be published. Required fields are marked *