05 Navigation - Bishop

#### Bishop Documentation

# The Navigation (Menu) Bar

Now that you have tweaked your pages, it’s time to learn how to make your Pages show on the Navigation Bar.

- 1. Navigation Bar
- 2. Choose the pages
- 3. Add to menu
- 4. Set the menu
- 5. Navigation label
- 6. CSS Classes
- 7. Order the menu

You will choose and arrange your Pages on the Navigation Bar via the “Menus” page. First, go to your WP-Admin left sidebar, click on “Appearance” and then on “Menus”.
If you imported the demo content, your menu will already have pages on it, but if not, you will need to build your Menu like the example above. Begin by giving your Menu a name. In the illustration above, we simply called ours “Menu”.

### 2. Choose the pages

Back to top

Next, choose the Pages that will show on your Menu. To do this, on the left you will find a list of “Pages”. Click on the Pages that you want to show on your Menu. **Note - Sometimes only the “Most Recent” pages show. To show all your pages, click “View All”.

Click on the pages you want to show, then click “Add to Menu”, and the pages will appear on your menu like the above example.

Now add your Menu to your Navigation bar. In the above example, click on "Manage Locations" tab on the top of page. In this section we have several customs menus to choose from, but we want to use “Menu”. So we clicked “Main Navigation” to open a drop-down box, then clicked “Menu” for the Main Navigation.

Since you are using the HOME-SAMPLES #2 page layout as your example, simply go to the “Home” box on the Menu, click on the drop-down arrow, and it will open like the picture below.

But you probably don’t want it to say “HOME-SAMPLES #2” on your Navigation Bar, you just want it to say “Home”. Therefore, once the drop-down opens (like the image below), change the Navigation Label from “HOME-SAMPLES #2” to “Home”.
**Note - the bottom of the drop-down still reads “Original: HOME-SAMPLES #2”, so you know you’re using the right page layout.

to use our highlight and highlight inverse color options, put the text in between [ ] or { } as showed below

the frontend html result

### 6. CSS Classes

Back to top

Use "Css Classes" option to change the link layout, using "icon-home" class yuo will display the home link as showed below

the frontend html result

In the

**Note – Click and drag the pages on the right side of your Menu to arrange them in whatever order you desire.

SAVE ALL YOUR CHANGES!

For a more detailed explanation of how to set up your menu in Wordpress, go to: http://codex.wordpress.org/Appearance_Menus_SubPanel