Editing Navigation Menus

The custom menu widget  is used to create sidebar menus on most sites in the Meerkat theme. On this site, you can see an example to the right called “Topics.” The widget itself has very few options- it mostly serves as a way to map a specific menu to a location in your sidebar, but can also be used to make a callout menu box. The links that appear in the menu are controlled via the menu editor, not the widget itself.

  • Only site administrators can edit menus.

    From the dashboard

    Select the Appearances -> Menus from your dashboard menu. If you don't see "Appearances" in the left column of your dashboard, you're probably not an administrator.

    dashboard-menus-new

    From the front of the site

    Click the 'Edit Menu' button that appears at the bottom of menus. You will be taken to that menu in the Menu Editor.

    An image of the navigation menu with a red box outlining the position of Edit Menu button at the bottom right.

    From the widget editor

    You can get to a custom menu through the widget editing interface (how to edit widgets) by clicking on the "Edit Menu" link (outlined in red below) - this will take you directly to the correct menu.

You will find your site’s Menu Editor by visiting

Dashboard -> Appearance -> Menus

  • Figure 1: menu editing interface
    Figure 1: menu editing interface
    1. Select menu for editing
      Select one of the site's existing menus from the pulldown menu, then click the "Select" button. The menu will load on the right side of the page, in the area outlined in green above.  If you clicked on the "Edit Menu" link from the widget editing interface, the correct menu should already be selected for you.
    2. Create a menu
      Click the "create a new menu" link. Name your menu (choose carefully, because you won't be able to rename it), then click the "Create Menu" button.
    3. Delete current menu
      Deletes the current menu. Unlike pages/posts, there's no way to restore a deleted menu.
    4. Save current menu
      Remember to click the blue "Save Menu" button after creating a new menu, or making changes to one.
  • Menu Name

    Do NOT change your menu name - it will delete the menu. You can edit the menu’s title as it appears on your website under Appearance -> Widgets.

    add-menu-items

    Adding menu items

    New menu items are available in the left column and are sorted by type: Pages, Links, and Categories.

    By default, the Pages section will be expanded. To view Links or Categories, click the arrows outlined in orange, left.

    New menu items will appear at the bottom of the menu.

    Pages

    Check off the pages you'd like to add to the menu. If you don't see the page you want, click on "View All" (see red arrow) or click the "Search" link. After selecting one or more pages, click the "Add to Menu" button.

    Links

    Use this to add a link to an external site (another site at Williams, or outside of Williams). Enter the full URL (including "http://"), provide link text, and click the "Add to Menu" button.

    Categories

    Check off the categories you'd like to add to the menu. This will link to a category of posts, not individual posts. If you need to link to an an individual post, you can use the links tool. Click the "Add to Menu" button.

  • Rearrange menu items

    Drag and drop menu items to reorder them. You can create submenus by dragging an item below and slightly to the right of another item (see sub item, right).

    custom-menu-subitem
    Submenus will appear indented

    edit-menu-itemTo edit a menu item, expand its box by clicking on the triangle (outlined in red). The text outlined in orange will tell you which type of menu item it is (page, category or custom - a.k.a. link).

    Once expanded, you can delete the item by clicking on the "Remove" link in the lower left.

    If you change the navigation label for a page, it will only be reflected in the menu (it does not change the page's title). If you want to change the name of the page globally, edit the page itself, and change the title there- the updates will also be reflected in the menu. If you change the navigation label, the menu will ignore any further changes to the page name.

    The title attribute is text that will show below the viewer's mouse pointer when they hover over the menu item. This is particularly helpful if you've used an abbreviation or acronym as the navigation label (use the un-abbreviated, or full name as the title attribute), or if users might not understand where clicking on the link will take them.

    None of your changes will be visible until you click the "Save Menu" button. Remember to save your work as you go!

    Menu items with children

    If a menu item has children, then it acts as a container and not a menu link itself. This simplifies things for the user because the container label only does one thing -- reveal and hide the child links -- but it can make labeling challenging in some circumstances. When the parent page for a section has the same title as the section, one common way to avoid doubling up the label in the menu is to rename the menu item something like "Overview" while leaving the page name the same.

    The frontend of the nav menu is only built to handle three levels. Main links/containers, child links/containers, and grandchild links. If you need deeper nesting than that, then please be in touch and we can work with you to find a solution.

    With respect to actually building the menu, we suggest you use "Custom Links" as containers and set the URL to be just "#". This convention helps to clarify how things work. The screenshot below attempts to illustrate this.