Menus

Two types of navigation menus are available in Boise State’s WordPress theme.

1. The Local Navigation menu is the horizontal list of items that appears below the Boise State logo at the top of each page on desktops or laptops, or a vertical list of items on mobile devices. All sites have a Local Navigation menu.
2. The Section Navigation menu is an optional vertical list of items that appears at the top-right of a series of pages on your site on desktops or laptops, or a vertical list of items on mobile devices.

Note: Navigation menus can only be configured by users with the Administrator role.

Local Navigation

Local Navigation is configured through Appearance > Menus in the Dashboard.

In “Menu Settings” located at the bottom of the screen on the Menus page, the checkbox next to “Menu: Main Nav” must be selected in order for your Local Navigation menu to appear:

To add items to your Local Navigation, check the appropriate pages or posts from the left side of the Menus page, and select Add to Menu to make the items appear in the Menu Structure section on the right side of the Menus page.

Note: Your site’s home page will automatically appear in your Local Navigation, so there’s no need to manually add it to your menu.

Although it is possible to add links to other websites from your local navigation, this is generally not recommended. It can be confusing for some users to click on a local navigation link and end up on a different site with completely different local navigation. If you need to link to a page on a different website, create a page on your own site with a brief description of the destination and let the user know they will be going to a different site. You can then link to the other site from that page.

Only Parent Menu Items Display in the Local Navigation Menu

Nested menu items (“sub items”) will not display in the Local Navigation menu on your pages; see the Section Navigation section below to learn how to utilize nested menu items within your pages.

In the example below, “All OIT Services A-Z” and “Help Desk at The Zones” are parent menu items, and will display in the Local Navigation menu. The indented “Equipment Checkout” and “Labs and Public Computing” sub items will not display:

How Local Navigation Items Appear on Desktop or Laptop Displays

Because the Local Navigation is a horizontal menu, the number of menu items appearing on a user’s desktop or laptop screen is dependent on the resolution of the display and the width of the web browser window.

If the number of items exceed the browser width, the More… menu item is activated and acts as a dropdown menu for any remaining menu items that cannot fit into the Local Navigation display.

Note: The More… menu item doesn’t appear on mobile devices, as the Local Navigation menu on mobile devices appears as a vertical menu instead of a horizontal menu.

Section Navigation

Section Navigation is an optional vertical menu that can be configured to appear at the top-right of one or more series of pages on desktops or laptops:

Note: On mobile devices, the Section Navigation will appear as a vertical list of items.

Section Navigation and Panels

Your Section Navigation menu will not display if you are using the Panels page template, or are using panels for all of your page content.

To use Section Navigation, you have to use the Default Template and start off your content with normal headings and text in the default WordPress text editor. You can add one or more panels to your page, but the panels will appear below your introductory text and Section Navigation menu.

Also, if you have a large number of menu items in your Section Navigation and are also using panels on your page, your first panel could have a large amount of white space above it, depending on how much content you add to the WordPress text editor. It is a good idea to review your pages on a variety of screen sizes to ensure the content is displaying as intended.

How to Create a Section Navigation

Section Navigation requires three steps:

1. Determine which pages you want in your Section Navigation menu.
2. Configure parent and child menu relationships for these pages under Appearance > Menus.
3. Configure parent and child page relationships for these pages under “Page Attributes – Parent” on each page in your Section Navigation.

Section Navigation involves determining a top (parent) page, and then determining the associated (child) pages to appear in your Section Navigation menu.

In the example image below, “BroncoPrint” is one of three Section Navigation menu items. These three pages are child pages, and they are related to a parent page in my Local Navigation menu.

First Step: Know Your Pages

Before you create your relationships, you need to know what pages you want to include in your Section Navigation menu, and where they are located.

You’ll also need to determine which page in your Local Navigation menu will be the parent page for your Section Navigation menu items.

Second Step: Configure Your Menu Relationships

Select Appearance > Menus in your Dashboard.

Add the pages that will appear in your Section Navigation menu under “Menu Settings.” (See Local Navigation instructions at the top of this page to learn how to do that.)

Now drag and drop those items so they appear as indented “sub items” under one of the existing navigation items in your Menu Settings. The menu item that isn’t indented becomes the parent page.

For example, here is how my sub-items appear in the menu under the page for “Print Anything at Boise State.”

 

Got it? You’re almost there!

Third Step: Configure Your Page Attributes

Open each page that you want in your Section Navigation and designate the “Parent” under “Page Attributes” on the right-side of the Page editor. This parent page must be the same page under which you indented your menu sub-items in the previous step:

Save each page. That should be all you need!

View one of your pages in your Section Navigation. You should now see the other pages listed in your Section Navigation.

Caching

The Boise State website uses object caching to improve web performance for our front-end users. If you notice that when you make changes to your menu they are not immediately reflected on the front-end of your site, this is because your menu is displaying the version it has stored in the cache and the cache has not updated with the most recent change yet.

This is normal, and under normal conditions, the cache will automatically reflect the change within 24 hours. If you have time-sensitive updates that must be reflected on the front end immediately, you can force the cache to flush and show your changes on the front end by clicking the “Clear Cache” button in the top horizontal WordPress admin toolbar on the front or the backend of your site.