Site Navigation

Contents

Site Navigation

You can reach the Site Navigation module from Site Central (the link just below the Site Designer link) or from the top right corner of Site Designer or BB2.

Once here, you'll see your site's navigation in a series of blocks. The block system here is based on BB2's system. Simply drop blocks from the palette, and drag blocks to re-order your navigation.

Important Reminder

When you're done setting your navigation order, click on the Build It! button. If you don't click on that button, your navigation changes will not be saved.

Nav Headers allow you to group your navigation links based on any criteria you choose. For example, a recipe site might separate Tier 2 links by Breakfast, Lunch and Dinner, or by Meat, Poultry, Seafood, Vegetables and Fruit groups.

Nav Headers help your visitors make quick sense of the content you have on your pages. Use them when you have more than 10 or so Tier 2 pages in your navigation.

Nav Headers appear differently in the two navigation types.

In a vertical NavBar, the headers appear as separate items, with related Tier 2 pages appearing below them.

Vertical NavBar navigation

In a horizontal menu, they appear as menu items, similar to Tier 2 pages. However, hovering over a header reveals a submenu with the related Tier 2 pages.

Horizontal headers may also have a submenu indicator to help visitors know that there's more to see.

Horizontal menu navigation

Adding a Nav Header

To add a Nav Header, click and hold on the Nav Header Block in the block palette.

Then drag the block to where you want it to display. When you see a red bar there, release the mouse click.

New Nav Header

Directions for Use
  • Click and drag the Nav Header Block from the palette. Drop it where you want to add the header.
  • Choose whether you want the Nav Header to show on Desktop only, Mobile only, or both (All).
  • Replace "New Nav Header" with the text you want to use for the header.
  • Drag a Page Block onto the Nav Header Block to associate it with that header.
  • To remove a Nav Header Block from the navigation order, click on the X at the left edge of the gray bar at the top of the block.

You'll see the block appear on the page. You can click on the gray bar at the top of the block to move it anywhere.

The toolbar presents two options.

Decide whether you want the Nav Header to appear when someone views your site on a smartphone.

The default is to show it on all devices (All). Select Desktop if you do not want it to show in mobile.

Nav Header Block toolbar

The block has the text "New Nav Header" pre-entered. Change that text to have the header say what you want (e.g., Dinner, or Poultry).

To associate pages with this new Nav Header, click on and hold the gray border of those page blocks. Drag the blocks inside the Nav Header's borders. When you see a red border inside the block, release the click and drop the page's block.

Nav Header with pages

Repeat for each page you want to associate with that header. You can also change the page order by clicking and dragging inside the Nav Header.

And you can nest a Nav Header inside a Nav Header, and add one or more Page blocks to it. This will create a sub-submenu if you chose to use horizontal navigation. For vertical navigation, it adds a "regular" Nav Header section to the navigation.

To remove a Nav Header Block from the navigation order, click on the X at the left edge of the gray bar at the top of the block. The Nav Header will no longer appear in the navigation on your site.

Important Note

If you delete a Nav Header Block with one or more Page Blocks or Subdomain Blocks inside it, each Page Block or Subdomain Block will also be deleted from the navigation.

You'll have to add them back into the navigation manually. To avoid that work, drag each Page Block or Subdomain Block out of the Nav Header Block before you delete the block.

Page Block

Each new Tier 2 page automatically appears in the navigation order, sitting at the bottom of the list. Its text comes from the button/menu text you typed in Page Information when you created the page and made it a Tier 2 page.

To determine each page's file name, hover over the block. A tooltip will appear, displaying the full URL of the page.

You can move each new page wherever you want in the navigation order by clicking and holding on the gray portion of that page's block, and dragging it to the new location.

Directions for Use
  • Click and drag the Page Block from the palette. Drop it where you want to add the page link.
  • Choose whether you want the page link to Show in mobile. Remove the check if you do not want it to show.
  • Choose whether you want the page link to Show Only in Table of Contents. Add a check if you do not want it to appear in the vertical or horizontal navigation.
  • Replace the page link's text with the text you want to use for the link in the navigation.
  • Drag the Page Block into a Nav Header Block to associate it with that header.
  • Drag any existing blocks to other locations to reorganize your navigation.
  • To remove a Page Block from the navigation order, click on the X at the left edge of the gray bar at the top of the block.

You can convert a Tier 3 page into a Tier 2 by dragging a Page Block to the navigation order.

When that happens, a page selector tool opens, displaying every page that's not currently in the navigation (in other words, every Tier 3 page). Select the Tier 3 page you want to convert to Tier 2.

You can confirm that the page is now a Tier 2 by editing the file and checking Page Information.

You'll see that the box to make it a Tier 2 page is now checked. (This will not happen, however, until you've saved the new Site Navigation settings.)

Click on any Page Block to activate the toolbar for that page.

Page Block toolbar

You can have the page link show in the navigation for Desktop only, only for mobile phones, or for both (All).

The block has pre-entered text from the Title you gave the page in Page Information. Change that text to have the header say what you want (e.g., from Vegan Recipes to Vegan).

Editing button/menu item text in Page Block

To associate the page links with a Nav Header, click on and hold the gray border of the Page Block.

Drag the block inside the Nav Header's borders. When you see a red border inside the block, release the click and drop the Page Block.

In the horizontal navigation, any page link associated with a Nav Header becomes a submenu item. It will only be seen when a visitor hovers over the header text in the main menu.

Repeat for each page link you want to associate with that header. You can also change their order inside the header by clicking and dragging a Page Block inside the Nav Header Block.

You can also drag a Page Block anywhere else in the navigation order if you want to make some Tier 2 pages more important, or others less important.

If you find that some pages receive more clicks than others, move their links to the top of the order. If others near the top don't receive many clicks, move their links down the order.

Moving a Page Block

To remove a Page Block from the navigation order, click on the X at the left edge of the gray bar at the top of the block. This Tier 2's link will no longer appear in the navigation on your site.

Subdomain Block

Directions for Use
  • Drag a Subdomain Block to another location to reorganize your navigation.
  • Or drag it inside a Nav Header Block to add it to a horizontal navigation submenu.

Subdomains are the third type of navigation item that can appear on your pages.

There's no block in the block palette for subdomains, as these are added automatically when you use Infin It! to link a blog, forum, or other external option to your site.

To determine each subdomain's URL, hover over the block. A tooltip will appear, displaying the full URL of the subdomain.

When you add a button name in Infin It!, that name appears here in Site Navigation automatically, in a Subdomain Block.

Drag one of these blocks anywhere in the navigation order, or drag it into a Nav Header Block if you want it to appear in a horizontal navigation submenu instead of the main menu.

You can have the subdomain link show in the navigation for Desktop only, only for mobile phones, or for both (All).

To associate a subdomain with a Nav Header, click on and hold the gray border of the subdomain's block.

Drag the block inside the Nav Header Block's borders. When you see a red border inside the block, release the click and drop the Subdomain Block.

In the horizontal navigation, a subdomain associated with a Nav Header becomes a submenu item. It will only be seen when a visitor hovers over the header text in the main menu.

Repeat for each subdomain link you want to associate with that header. You can also change their order inside the header by clicking and dragging a Subdomain Block inside the Nav Header.

You can also drag a Subdomain Block anywhere else in the navigation order if you want to make one link more important.

To remove a Subdomain Block from the navigation order, click on the X at the left edge of the gray bar at the top of the block. The subdomain will no longer appear in the navigation on your site.