Editing Navigation Menus

Rearrange the order of pages in your site's menus.

WashU Web Theme sites have four navigation menus. Unless you’re using custom menus, you edit them all in one place, following the steps below.


Key terms

Main menu: Lists top-level pages, ie, pages with no parent
AKA primary navigation, horizontal nav

Header menu: Collective term for main and dropdown menus; on a desktop computer, it’s across the top of each page

Mobile menu: Condenses all menus behind a menu button when the site is viewed on smaller screens, such as mobile devices
AKA mobile nav, hamburger menu

Sub-menus: List sub-pages, or child pages, of a parent page
AKA sub-navigation, subnav

On a desktop, sub-menus show in two places:

  • Dropdown menu: Lists sub-menu when you hover over a parent page in main nav
  • Sidebar menu: Lists sub-menu on the right side of a page that has or is a child
    AKA right navigation/nav

 

How to order pages in your menus

Websites created before 9/27/18 use a legacy menu builder. These instructions are for the new menu builder. Switch to the new menu builder »

Publish the page and assign it a parent

Pages have to be published before you can order them in the menus.

To create sub-menus (dropdowns and sidebar menus):
Add pages to dropdown and sidebar menus by assigning those pages a parent. You’ll set the parent from the page editor for each individual sub-page (see Step 4 of this tutorial).

You cannot add pages to a sub-menu following the tutorial below; you can only change the page order. In other words:

  • The hierarchy of pages is edited on individual pages.
  • The order of pages is set following the steps below.

Go to your list of pages

Go to Dashboard > Pages. (Ignore the Re-Order sub-menu link. Trust us.)

Your site’s pages are listed here, in the order they appear in the menu.

Child pages, listed below their parents, are indicated with an em-dash (—).

SCREENSHOT 1: This shows how parent and child pages appear in the list of all pages. Below, Screenshot 2 shows how these same pages appear on the front end in the header menu.

SCREENSHOT 2: This shows how the pages in Screenshot 1 appear in the main and dropdown menus.

Show ALL pages on one screen

By default, this screen lists 20 pages. If your site has more than that, you can change this setting, and the site will remember your new default. 

  • Click Screen Options in the top right corner.
  • Increase the number of items per page (up to 999).
  • Click Screen Options again to close it.
  • Now you can see all pages on a single screen. Ta-da! 

Order top-level pages to set the main menu

Drag and drop top-level pages into the order they should appear in the main menu.

Child pages (indicated by the – symbol) will automatically stay with their parent.

In this example, “Financial Aid & Scholarships” is moved before “Majors & Academics.” All of its children (“Undergraduate Charges,” “Need-Based Scholarships,” etc.) stay with it.

To drag-and-drop:

  • Point your cursor next to the page title.
  • When the crosshair cursor appears, click and hold to drag the page to a new position.
  • Release your cursor to drop the page in its new location.
If you can’t drag-and-drop your pages, your site may be running the old menu builder. Follow the instructions below to switch to the new menu builder.

Order child pages to set the sub-menus

Now drag-and-drop the child pages, indicated by a symbol, into order. This controls the order of pages in the dropdown menu and sidebar menu.

Example of reordering subpages in the “You @ WashU” section. “Residential Life” becomes the first child page page in the section, then “Dining,” “Get Involved,” and “Virtual Tour.”

The dropdown menu for “You @ WashU”, left, and the right sidebar navigation for the section match each other, and the order of the pages are listed in the Pages dashboard.

You cannot change a page’s parent via drag-and-drop. To assign a page to a new parent, go to the page editor (see Step 4 of this tutorial).

If you assign a page to a new parent, it’s URL will change, so links to that page will break. Remember to fix the broken links. If your site is live, you should also set a redirect.

 


Switching from the old menus to drag-and-drop

If your site was created before late September 2018, follow the steps below to switch to the new menu builder. Then you can edit all site menus in one place, following the instructions above.

To make the switch:

  1. Go to Dashboard > Plugins and activate Post Types Order.
  2. Go to Dashboard > Pages and reorder your pages – using the steps above – to match your existing menu structure. It may be helpful to have your site open in another tab as a point of reference.
  3. Once you’ve reordering your pages, go to  Appearance > Menus.
  4. Under Menu Settings, uncheck both boxes (Automatically add new top-level pages to this menu and Main Menu).

  5. Click the Save Menu button.
  6. View your website from the front end to check your menus. Are all pages where they should be? Go back to the Pages list if you need to reorder anything.