Spine Navigation Menu
This guide covers the basics of managing the navigation menus for sites using the WSU Spine theme.
By default, the Spine theme provides for two menus for the navigation area: “Site” and “Offsite”. As the names suggest, the “Site” menu is intended for providing navigation through your own site, and the “Offsite” menu is meant for linking to any external resources. The two menus have different visual treatments to keep them distinguished from one another.
Contents:
Managing menus
Both the site and offsite menus can be managed using the built-in menu editing features provided by WordPress.
Through the Dashboard
The Dashboard page for menu management is under “Appearance” > “Menus”.
If your site has no menu yet, you’ll be prompted to create a new one:
- enter a name for your menu in the “Menu Name” field;
- click the “Create Menu” button.
Your new menu is now defined! Next, you’ll want to add some items to it – the “Pages” pane to the left of the screen should already be open, so let’s start there:
- if you don’t see the page(s) you want to add, click the “View All” tab at the top of the pane;
- select the page or pages you want to add, then click the “Add to Menu” button at the bottom of the pane.
The “Display location” options under the “Menu Settings” section allow you to set your menu as the “Site” or “Offsite” menu.
Through Customizer
If you’re on the Dashboard menu page, you’ll notice a “Manage with Live Preview” button to the right of the page title. Clicking it will take you directly to the “Menus” manager panel of the Customizer.
You can also access it by clicking either the “Appearance” > “Customize” item, or the “Customize” button in the admin bar if you’re on the public face of your site. Once the Customizer is open, click the “Menus” panel.
The process for managing a menu through the customizer isn’t much different from managing one through the dashboard, but it has the added benefit of giving you a preview of your changes as you make them. In my opinion, it also does a better job of breaking down the process and walking the user through it in intuitive steps.
You can edit an existing menu by clicking it, or create a new one by clicking the “Create New Menu” button. Creating a new menu requires entering a name before proceeding. You can also select the menu location at this point, but it’s not a requirement.
Once your menu is created (or you’ve selected a menu to edit), click the “Add Items” button to surface the panes for different item types. To add an item to your menu, simply click it. If you’re adding a custom link, enter the URL and link text in their respective fields, then click the “Add to Menu” button.
Organizing items
Now that your menu has items – whether you use the dashboard page or the Customizer – you can drag them up and down to order them any way you need. You can also create sub-levels by dragging items to the right under the item you want them to be subordinate to.
Note: We do advise against adding sub-level items under the top item of your menu, as that creates an awkward and poor usability experience for visitors.
Once your menu is organized the way you want it, save it by clicking the “Save Menu” button (on the dashboard page) or the “Publish” button (on the Customizer).
Removing items
Removing menu items is equally straightforward:
- open the item;
- within the “Appearance” > “Menus” dashboard page, this is done by clicking the down arrow on the right of the item;
- within the Customizer, clicking anywhere on an item will open it.
- click the “Remove” link at the bottom left of the item;
- when managing through the Customizer, each item on the menu will also have a red “X” on its right when the “Add Items” pane is open – clicking that will also remove the item.
As always, don’t forget to save when you’re done.
The ”Overview” link
When you create a sub-level under an item, you’ll notice that an “Overview” link is generated as the first item of that sub-level. This behavior is by design. While it may seem unexpected or frustrating at first, the purpose of this is to reserve the parent-level item to serve as the toggle switch for displaying its subordinate items.
We don’t want to force users – especially those on mobile devices – to have to load a page before seeing the sub-level navigation items. Imagine trying to look through a site menu on your phone or tablet only to have to the navigation close and a different page load up every time you tried to view a sub menu!
It may be helpful to think of the parent-level menu items not as content pages themselves, but as labels for that section of your navigation. That said, you have control over the “Overview” link regardless of the way you structure your menu.
Using a content page for the parent-level item
If the parent item is a page, post, category, tag, or custom link with a full URL, an “Overview” link will be be generated. However, you can easily change the label to a term that is more appropriate for your content:
- open the parent-level item;
- enter your new text in the “Title Attribute” field.
Note: if you don’t see the “Title Attribute” field:
- click the “Screen Options” tab on the top right of the “Appearance” > “Menu” dashboard page;
- check the “Title Attribute” box in the “Show advanced menu properties” section.
Using a section label for the parent-level item
You can avoid the “Overview” link entirely if you take the section label approach to your parent-level items. In this case, you’ll want to add the item using the “Custom Links” pane:
- enter a pound sign (#) in the “URL” field;
- enter the label you would like in the “Link Text” field;
- click the “Add to Menu” button.
Now you can drag your sub-level items beneath this, without the worry of an “Overview” link being generated.