Cleaning Up Navigation / Menus

How to Clean Up & Organize Crowded Navigation Menus

As PTAs and PTOs start to add more and more content to their websites, many will start to notice that their top navigation menu might not look very good because there are too many links on it and it is now moving to a second line. This is especially common after switching themes. The image below is a great example of the kind of cluttered navigation that is common to new PTA and PTO websites.

clutteredThis tutorial will show you how to assign the correct menu to your theme as well as how to modify and adjust your menu. The majority of our themes also support Drop Down Menu’s, so we will also show you how to make sub-menu’s to help consolidate. Please note that this tutorial is based on our Starter Theme, but applies to any Digital PTO theme that has the option to assign a menu to the navigation. We do offer a small group of themes that do not support menus. If this applies to you, we would suggest selecting a different theme, or making fewer main pages.

Step 1: Access the Menus Section

access-menus

To access the Menus section go to APPEARANCE > NAVIGATION MENUS

Step 2: Understanding the Menu Manager Screen

undertsanding-options

The Image above gives you a quick overview of the Menu Manager screen. The order of your options may be different and additional options may be available based on your theme and / or installed features. If you want to move the modules around, simply click on the title of the module you want to move and drag it to a new location.

Manage Locations: This Tab is where you will assign different menus to your theme. If your theme supports more than one menu (for example a Main Menu and a Sub Menu) all options will be listed in this section.

Pages: This is a list of all of your available pages that can be added to your menus. Most Recent lists the most recently added pages, View All lists all pages on your site (may have multiple pages) and the Search function allows you to search for a specific page on your site to add.

Links: This page allows you to add a link to an external website that is not a part of your Pages or Categories.

Categories: This is a list of the categories that you have for your News Posts. You can link to a specific category in your navigation as well as to pages. For example, you might want to link to “Fundraising News” and have a list of all the News Posts you’ve published about your fundraising efforts.

Current Menu Structure: This section contains your menu (or menu’s if you have more than one) and is where you can add, arrange and edit all of your menu items.

Step 3: Assign a Menu to your Theme

manage-locations

If you do not have a menu selected in the “Manage Locations” box, please select the Main Nav Menu (or whatever your main menu is named) from the list and click SAVE. If you have created a different menu, you can select that menu instead if you would prefer. If you have multiple menu options, be sure to assign them all if you want to use them.

Step 4: Review your Current Navigation

review-current

Click back to the EDIT MENUS tab if you are not there. The current Navigation (Menu layout) is presented on the right of the screen. Each Grey box represents a menu item in your navigation. You will see some default pages pre-added to the menu, but you may have more you want to add. Those will be loaded from the left side under the PAGES Module. If you have more than one menu, click the name of the menu to activate that menu for editing.

Adding Pages to your Menu

add-pages

Once you have reviewed the pages you currently have in your Menu, you can add additional pages you have created. To add additional pages, look for the page or pages you want to add in the PAGES list. Check the box next to the pages you want to add to your Menu and then click the ADD TO MENU button. If the page you are looking for is not listed, try clicking on the VIEW ALL or SEARCH tab. This is common for sites with dozens of pages. When you add a page, it will be added to the bottom of your menu list.

Categories can be added the exact same way in the Categories Module.

Moving Menu Items Around

moving-items

Your new pages were added to the bottom of your menu. More than likely, you are going to want to move them around. It is very simple to move a page around in your menu. Click on the menu (and hold down) and drag the menu item around on the menu. If the item you are moving is supposed to be on your top menu, be sure it doesn’t indent or it will become a sub menu of the menu above it. That is explained below. 

Creating a Sub Menu (Drop Down Menu)

create-sub-menu

Most of our themes (but not all) support sub menus or child menus. These menu items will become a drop down menu when you hover over the main menu item they are below. To create a sub menu, simply click and drag an menu item slightly to the right and place it below the main menu item you wish to add it below in your navigation. In the example above, we are going to make the School Carnival Menu & the Book Fair items appear as a drop downs below the main Fundraising Menu Item.

Editing & Shortening Page Menu Names

item-names

Some of your Pages might have rather long titles (like: Our Impact on the school), which is just fine, but they might be a tad long for your menus. We highly suggest keeping your menus as short as sweet as possible. In the example above, we can change that menu item to “Our Impact” and still keep the main page’s title the same. To do this you need to click the triangle to the right side of the menu item you want to edit. This will open up the options. Enter the new Menu Title under NAVIGATION LABEL. Click the arrow again to shrink the options back up. Continue to repeat those steps for any menu items you wish to change.

Try to keep your Menu Item Names short! Your site is much easier to navigate this way.

Removing a Menu Item

remove-item

If you want to remove or delete an item from your menu entirely (don’t worry, it won’t delete the page, just the menu item), you can do so by clicking the arrow to the right of the menu item to expand it. Once that opens, click the REMOVE link.

Cleaning up your Menu to One Row

cleaning-up

As we mentioned above, it’s best to try to keep your menus on ONE ROW of your sites navigation bar. Go through your menus and consolidate. Create sub menus, shrink down text and do your best to make it all fit on one row.

cleaner-menu[alertThe example above demonstrates what a one row menu should look like. It is well organized and has a variety of sub menus. Your main navigation should have between 7 and 10 items at most (depending on length of the menu titles) and if you have more pages, try to add them as sub (drop down) menus. [/alert]

To Create a New Menu

create-new

If you would like to create a new menu, you can do so by clicking the CREATE A NEW MENU link.

name-menu

Then give your new Menu a name and click the CREATE MENU Button

second-menu

Now you can create all of the links in your new menu, add an additional menu or switch to your first menu via the drop down menu.

Be sure to SAVE your Menu Changes!

save-menu

When you have finished editing your menu, be sure to click the SAVE MENU button located on the top and bottom of your menus. Your changes will not take effect until you SAVE them.