Nearly every page on the website has two types of navigation (or “nav”): Top nav and left nav. This guide will explain the functional and strategic differences with both, as well how to manipulate them and some common questions that arise.

Top Nav vs Left Nav

Differences & Usage

Top Navigation

  • Positioned horizontally across the top of every webpage.
  • Used to display linkage to broader areas of the current website.
  • Displays up to eight horizontal main nav items or up to a certain amount of horizontal space before the Apply|Visit|Give buttons overtake it, whichever comes first, as well as up to two columns of dropdown menu links.
  • The order and linkage of all main nav items and nav dropdown links are fully customizable, but needs to be updated manually any time a change occurs.

Left Navigation

  • Positioned vertically to the left of the main body content of pages that aren’t home pages or full-width content pages (which are seldom used).
  • Used to display linkage to pages within the specific area of the website in which the page is housed.
  • Displays as many vertical nav links as needed, as well as up to two child page “levels” deep via the + symbols to the right of any nav items with child pages.
    • Note: More than two “levels” of child pages will display via the + symbols, but will be very difficult to use, so it’s encouraged that you work with your digital media manager to find a way to prevent this.
  • The order and linkage of all nav items are automatic based on page titles and their order within TerminalFour.
    • Note: Interested in changing the order of your pages? See our tutorial about Reordering Pages.

Updating the Top Navigation

In the previous iteration of the LMU website, the top nav links and dropdown menus were determined automatically based on the child pages below the home page of that given website. This works great for the left nav which can run down the side of a page forever and ever and work fine, but the horizontal top nav has a fundamental limitation to only fit within the width of a website’s template. This isn’t just for LMU, either, but for any website’s top navigation. As a result, we made the top nav content customizable when the website was redesigned in summer 2015.

The upside is that you can curate exactly what’s included in your website’s top navigation, and in any order you like. The downside is that you need to make all these updates manually. That being said, this typically this doesn’t create too much extra work for most web admins since most child pages directly below a website’s home page don’t change title or positioning that often.

To make updates to your top navigation in TerminalFour, start by locating the “site_main_nav” section, which will be located in your home page’s main directory. Open this, head to the “Content” tab, and open the single content item listed, which will probably be titled something like “Main Nav.”

Locate site_main_nav

Once you’re in the content of the “site_main_nav” section, take a moment to scroll through the length of the content. It’s a very long content type, but that’s because it repeats the same options eight separate times, with each of these option groupings pertaining to the up to eight main top nav items.

Top nav options in TerminalFour

The above settings result in the following:

What the settings look like in practice

Updating the Left Navigation

Since the left nav is determined by the titles and order of pages within the section you’re currently viewing, changing the content in the left nav is just a matter of updating the titles and order of the pages in that section (See Reordering Pages for more information on page organization).

That said, one thing you can manipulate is what page “level” the left nav displays. Here’s how our website levels essentially break down:

Navigation levels

By default, the left nav is programmed to display what is on the same level as the page that’s currently being viewed. Most of the time this is what’s preferable. However, there will be instances where you’ll want a page’s left nav to display that page’s children instead, rather than pages on the same level.

For example, let’s take the Annual Giving section of the Giving website, mentioned above. Normally this page would display like so:

Annual Giving default left nav

Not too bad at face value, but there are a couple issues. First, it’s repeating the main navigation listed at the top, which is sometimes unavoidable but never ideal. Second, and more importantly, when you expand the + symbol next to Annual Giving, all the children and children’s children below this section quickly become an unwieldy mess.

Annual Giving default left nav expanded

The solution is to display the child pages of the Annual Giving in the left nav instead, so that when you’re on the Annual Giving page you only see pages within the Annual Giving area of the website. You can do this using a special content type known as “2015 Set inner nav start level“.

Using the “2015 Set Inner Nav Start Level”

This content type is actually really simple to use, don’t worry. Start by heading to the “Content” tab of the page where you’d like to change the left nav, click the green “Add Content” button, and select “2015 Set inner nav start level” from the options. You’ll be greeted with the following:

Set inner nav start level settings

The “Name” field is only visible within TerminalFour, so you can put anything there that makes it easily identifiable – I usually make it simply “Set inner nav start level”. Once that’s done, you need to select which “level” of pages should appear in the left nav. Truth be told, I usually guess and check this until I get it right. I usually start with Level 4, click “Save and approve,” check the page’s preview, and if it’s wrong I try Level 5, repeat.

There’s also an option called “Show Current Children” at the bottom of the dropdown menu. This automatically detects what the child pages are below the current page, and only displays those in the left nav without including + symbols next to pages with children.

Here are how a few different level options for this page would look in context:

Annual Giving with different "level" options selected

Once you’ve found the best option for your needs, be sure to “Save and approve” the “2015 Set inner nav start level” content item, and you should be all set!

We hope you found this tutorial helpful! Feel free to contact us for any questions or concerns.