Navigation Menu

The “Header” of each website pages contains two sections – the toolbar and the main navigation menu area (with the logo to the left).

Screenshot of top of website page with the main navigation menu highlighted.
Screenshot of the WordPress admin area with "Appearance" and "Menus" highlighted

To change the items that are displayed in the menu, in the WordPress admin area hover over “Appearance” and click “Menus” in the sub menu that appears.

There are three different menus in use on the website (toolbar – at the very top of the page; main navigation menu; and in the footer at the bottom of the page). To select the correct menu to edit ensure the “Edit Menus” tab is selected, choose “Main Menu (Primary)” in the dropdown and click the “Select” button.

Editing Menu Items

The methods of editing the menu applies to any of the menus on the website.

Screenshot showing the Menu Structure edit pane.

The menu items that are displayed are shown in the “Menu structure” pane. Where items are offset – such “Our Mission” and “Partners” in the Menu structure screenshot -they will be displayed as sub menus as in the screenshot below.

Screenshot of the menu area with a sub-menu showing.
Screenshot of the "Add menu items" panel of the "Menus" admin page.

To add an item to the menu, check the checkbox next to the page in the “Add menu items” panel, then click the “Add to Menu” button.

The page will then display in the “Menu Structure” panel at the bottom of the existing items. To change the order simply click and drag it to the desired position.

After changes click the :Save Menu” button on the bottom right of the page to commit the changes.

screenshot of the "Save Menu" button.

Changing Display Name

By default the menu item will display the title of the page. This can be changed.

Screenshot showing the full options for a menu item.

In the “Menu Structure” pane every menu item has additional settings which can be accessed by clicking the small triangle to the right of the menu item name.

We can change what is displayed by adjusting the text in the “Navigation Label” text box (and clicking the “Save Menu” button).

Take care when renaming and make sure that the menu name closely relates to the linked page title. A menu item “Mission” would be acceptable to link to a page titled “Our Mission” but not to a page named “Our Projects”.

Removing an item from the menu

The “Remove” option can be found in the additional menu options accessed by clicking the small triangle next to the menu item name.

Menu Styling

The default menu has two menu items styled differently from the others to make them stand out:

Screenshot of menu area containing menu items styled differently
Screenshot showing the Classes text box in the extended menu options with "blue-text" entered.

The “Get Involved” link has blue text instead of the default black text color.

To remove the blue color delete “blue-text” from the “CSS Classes (optional)” text box in the additional menu options.

To add the blue to another menu item enter “blue-text” to the “CSS Classes (optional)” text box.

Screenshot showing the Classes text box in the extended menu options with "blue-border" entered.

The “Donate Now” link has a blue border and uppercase text.

To remove the blue border and uppercase delete “blue-border” from the “CSS Classes (optional)” text box in the additional menu options.

To add the blue border and uppercase text to another menu item enter “blue-border” to the “CSS Classes (optional)” text box.

Don’t forget to click the “Save Menu” button on the bottom right to commit changes!