Creating a navigation menu

Find and edit your menus

WordPress provides two distinct ways to add to and organize the links in your navigation menu. Users may choose to make navigation changes in either the customizer for the site or by using the interface found at Appearance –> Menus.

• For the the initial steps involved with deploying a site for the first time using this theme, the recommended interface is the one found within the Customizer.
• The customizer menu interface also has a distinct advantage in it allows you to see the edits you are making to the navigation in real time as they are made.
• The guide for configuring the header of your site contains further instructions for how to access the customizer.

Learn the basics

The documentation from wordpress.org is very helpful for explaining how the menu interface works. Be sure to take the time to read it through before following the rest of the steps in this guide. The details that follow are specific to building a menu for ASU using the Pitchfork theme.

https://wordpress.org/support/article/appearance-menus-screen/

Adding a single menu item

Items within the menu that have no immediate children will be expressed as top level items within the navigation.

The WordPress admin screen will not impose a limit as to the number of items that appear in the menu. But there is a practical limit to the number of items that can appear before causing the links to run off the page or incorrectly wrap to a new line. When adding a link to an already crowded navigation structure, be sure to visually check the results to make sure that all links are still visible.

Creating a dropdown menu

To create a dropdown menu for your navigation, you need to create a nested list of pages and custom links within the navigation menu that is exactly two levels deep.

The top level of your dropdown menu should always be a custom link that has the URL set to a hashtag (#).

• The custom link becomes the trigger to be clicked or tapped to expand the dropdown.
• However, the trigger can not also function as a top-level link to an additional page within the site.

All items to be contained within the dropdown menu should be nested under the custom link created above.

• The maximum number of items that should be displayed in a dropdown is eight items, according to the brand standard.
• However, the theme does not impose a limit to the number of children that can be nested in this way.
• Please use your best judgement and stick with the standards if possible.

Creating a mega menu

Large collections of links can be presented to the user within a single top-level menu item by organizing them in a mega menu. This results in a menu which extends the width of the viewport (for desktop) and presents the links in organized columns for the website user to quickly scan through.

1. Start by creating a custom link with the URL set to a hashtag (#) to use for the dropdown trigger.
2. Next, create an additional custom link with the URL set to a hashtag (#) to use as the column heading. Nest the heading menu item under the dropdown trigger item on the second level.
3. Nest all of the links that belong in the mega menu column on the third level of the menu hierarchy as direct children of the column heading that was just created.
4. Repeat steps 2 and 3 above to build additional columns for your mega menu. All second level items will become column headings and all third-level items will become clickable items in the menu.

Adding a call-to-action button

Transform a regular link within your menu into a call to action button by following the steps below.

1. Add the menu item that you want to transform into a CTA button in the same manner as any other link. The item can be from within WordPress or a custom link.
2. Save the menu and make sure that the menu is assigned to the “main menu” display location.
3. Once the menu has been saved, click the dropdown arrow in the upper right corner of the menu item to be transformed.
4. Activate the CTA button toggle within the menu item tile. Indicate a desired button color. Be sure to also change the navigation label to something more appropriate for a button if necessary.
5. Save your changes and preview your menu in another browser tab to see the end results of your edits.

The Pitchfork theme supports two of the three possible locations for a call-to-action button. CTA’s can be located:

• At the end of the navigation menu in the “primary” CTA position.
• At the end of a dropdown or mega-menu column.

Any button created in the first level of the menu will result in a CTA in the “primary CTA” position.

• According to the brand standards, there should only be two buttons maximum in this position.
• The brand standards also indicate that the button colors for CTAs in this position should typically be either maroon or gold.
• Neither of these constraints are enforced by the theme, so please use caution when creating your calls-to-action.

Any button created in the second or third levels of a menu will result in an “end of column” CTA.

• The ASU brand standards mandate that buttons in this position be ASU Gray 7 (black).
• When creating buttons in these positions, WordPress will ignore any other color that has been selected and instead enforce the standards.