How to manage navigation menus

How to manage navigation menus

How to Edit Menus

  1. Go to Appearance > Menus
  2. Go to the “Select a menu to edit:” dropdown, and pick the menu you want to edit.
  3. This will take you to the menu editor which you can use to organize, nest, and rearrange how you want your pages to display in your menus.


Add Menu Items

  1. Find the page (or other type of menu item) you want to add to your menu from the “Add Menu Items” selection area on the left.
  2. Select “Add to Menu,” and the page will appear at the bottom of that menu.
  3. Drag and drop the page you added to the spot in the menu where you want it to appear.
  4. To set something as a child menu item, drag the page so it appears indented underneath the primary page.
  5. Click the arrow on the right side of the menu item for more options. In this area, you can edit the following items:
    1. Navigation Label - The text that appears in the navigation itself and can be different than the title of the page, though not recommended for accessibility purposes
    2. A checkbox for opening links in a new tab
    3. Title Attribute - Not likely to be applicable to your website
    4. CSS Classes
      1. Navigation Buttons: When there is a button in your main navigation, we often use the "menu-btn" class in this field.
      2. Mobile Only: We sometimes use a "mobile-only" class in this field so the page only appears in the Mobile menu, but not in the desktop view of your website.
    5. Description - May appear in your mega menu if you have one
  6. Once you’ve got the menu the way you want it, click the “Save Menu” button in the lower-left corner.
NOTE: If a field you're expecting to see in WordPress is not visible to you, it might be hidden under Screen Options. Go to "Screen Options" in the upper right corner of your screen, make sure that the field you want to see is selected. Close out of "Screen Options" and the field should now be visible.

Have a mega menu? 


Common Menu Questions

Question: What happens to the pages in a menu if I delete a page?

Answer: When a page (or any other post type detail page) is deleted, it will disappear from the menus entirely. The next time you navigate to Appearance > Menus, you will see this page in its original spot in the menus, highlighted in red. You can delete that red menu item and save if the page no longer exists.

Question: What happens to the pages in a menu if I change a page's URL?

Answer: Once the website is LIVE, if you update a page's URL, it will update automatically within the menus to match the new URL. This happens because WordPress's menus use page ID to add pages to menus instead of just the URL.

HOWEVER.... If a page has been added as a custom link instead of as a Page, the URL will be broken in the menu. Here's an example of a custom link vs a page link in the menus. You can see that the URL is not listed in the Page version and that is because it is dynamic and will automatically update if ever changed.

​​​​​VIDEO: How to manage navigation menus


Transcript:

0:00 I'm going to show you how to update your menus in WordPress. For this example site that we have, you can see here our primary navigation has several items, it's got a menu button, it's got some drop-downs, um, and it's also got some checkboxes.
0:16 It's got child links with grandchild links, the third level of the menu down below. So I'm going to show you how to add a new link to your menu and start building out your menus if you need to make some changes to your menu structure.
0:29 One quick note is that I will not be covering mega menus, in this video, we'll have a separate video linked at the bottom of this article to show you how to update mega menus.
0:40 So, to make updates to your menu, you're going to come into the back end of WordPress, and down here in your sidebar, you're going to come to Appearance and Menus.
0:51 Once you come to Appearance, Menus, up here at the top, you'll see a drop-down that lets you see all of the different menu locations throughout your site.
0:59 Uhm, so the one that I was looking was just showing you on the front end is the main navigation, this is your header, so you can select that one here, and you'll see here this vertical view of the menu.
1:10 Uhm, so our parent-level pages, column 1, column 2, etc., these are all the way flush with the site. On the side, the child pages are indented a little bit, the grandchild pages are indented from there.
1:23 So to add a new page, what you're going to do is over here in this sidebar that says Add Menu Items, You're going to click on Pages, and when you exit, If expand this, you'll see three tabs.
1:35 There's Most Recent, so these will be the most recent pages. If you've just built a brand new page and you're adding that to the menu, it should appear right here at the top.
1:43 If you're looking for an older page, you can see a list of all by clicking View All here. So for demonstration purposes, why don't I add, uhm, this blog post.
1:52 Uhm, I'll select that. One last thing I want to show you is you can also search for a specific page.
1:57 Uhm, sometimes the search functionality, uh, gives you what you want and sometimes it's easier to just go into the View All view.
2:05 This is typically where I go when I'm building up menus. Uhm, so to demonstrate adding a new page, I'm gonna, I'll, I'll add my blog landing page here.
2:13 I'll select that and then scroll down to the bottom and click Add to Menu. And now that it's down here, you can see it's a parent-level page.
2:21 Uhm, so if I were to save this menu, it would be, uhm, it would show up right here next to, uhm, my menu button over here on the side, which is probably not where I want it.
2:33 Uhm, so what I'm going to do is take my blog and drag it up to, uh, the third column here and I'm just going to leave it indented just a little bit like this.
2:45 So if I go save menu and come to the front end and refresh, you should see here, here's the blog that we just added.
2:56 Uhm, so that's how you do that. That's how you add a new page and nest it. If you want to do a grandchild page like this, you can, uh, just drag it down and indent it a little bit like that.
3:08 Uhm, if you expand these, you'll probably see a description field here for certain menu designs. Uhm, if you don't see the description field here, you can scroll up to the top of your screen and click screen options and just make sure that this description checkbox is selected.
3:25 Sometimes WordPress likes to hide fields from you for some reason. Uhm, so, it's not in the event that you don't see the description field, you can just come up to, again, screen options up here in the corner and make sure that that's selected.
3:36 The other things you can do in here are, uh, change the navigation label. So, if for some reason you want to name this our blog in the menu, you can change the text that appears in the menu.
3:48 This navigation label is completely disconnected from the page itself, so updating this navigation label will not update the page, the page content itself.
3:58 Um, and then you can also remove, I will remove this from my screen. A couple other things here, I do want to point out the menu button if we expand this.
4:08 You'll see there's a CSS class in place called menu-btn. Um, this is a special CSS class that we have in place.
4:17 That will turn this regular menu item into a button like we, like you can see here. Um, every site's menu is going to be a little bit different.
4:26 And we'll have different design needs. Um, so, in your how-to document that we show you during the CMS training, you should find a list of all of your CSS classes that are used in your menus.
4:37 Um, that's almost everything I want to go over today. The last thing here, we added the blog to this three column, this third column right here.
4:47 You'll notice in our actual demonstration navigation that we have here, the blog is up here at the top. This is the secondary navigation.
4:56 So, if I wanted to add another page to this secondary navigation, that is a different menu entirely. I'm going to, before I, before I leave, I'm going to save my changes.
5:07 And then back up here at the top, this drop down many if I come to second. I'm going navigation and click select.
5:12 This will take me to my secondary navigation where you can see blog, how to, and page block library are the example pages that we've got in place in the secondary nav.
5:22 So again, all of the sites, uh, that we create will have wildly different menu designs and structures, but this is a high level overview of how to add new pages to your menus, um, and get them sort of built out and situated the way you want them to.