Custom Top Navigation

Owned by Sherral Trotter, created
Last updated: Jun 15, 2023 by Baylee Banks
3 min read

This guide provides step-by-step instructions on how to edit the top navigation menu using the Velocity format named top-nav-custom, located by default in your _assets folder. You'll learn how to create custom navigation menu items, drop-down menus, insert href links, etc. Additionally, you will have the option to apply this custom top navigation to specific pages or entire Page Types.

Table of Contents

 Instructions

Create a Top Navigation Menu

  1. Navigate to the _assets folder.

  2. Click top-nav-custom to access the code structure.

  3. Click Edit.

  4. The Top Navigation Format already has four menu items set up: About Us, News and Events, Media Gallery and Faculty and Staff Directory, as seen below.

  5. To change these items, replace the highlighted title and href with your own.

Find the Correct href Links or Path for a Page

  1. Locate the desired page within your Site Directory.

    • Right-click the page icon.

    • Find the path displayed and copy the path beginning with the forward slash (/). (See below.)


    • Add the copied path to the href attribute in your menu item.

When pasting the copied path, remove the site name portion and include only the part starting from the forward slash (/). For example, if the copied path is "My Site Name: /services/service-1", use "/services/service-1" as the href link.

Create a Dropdown Menu

  1. Edit the top-nav-custom as you did in steps 1-3 above.

  2. To change the Dropdown Title, replace the existing title with your own. (As seen below, change “Sample Pages” in line 12.)

  3. The Top Navigation Format already has four dropdown menu items set up: Sample Interior, Content Row Samples, Sample Interactive Table and Page with PDF. (See below.)

  4. To change these items, replace the highlighted href and title with your own. (Refer to Find the correct href links or path for a page.)

 

Configure a Page

To configure only a specific page to use top-nav-custom, follow the instructions below.

  1. Navigate to the chosen page.

  2. Click Edit.

  3. Go to the Configure tab.

  4. Scroll down to the TOP NAVIGATION region.

Configure Page Templates

To configure page templates to use top-nav-custom, follow the instructions below.

  1. Click Manage Site.

  2. Click Go to Configurations.

  3. You will need to complete these steps for EACH page in your site.

    • Click the Edit icon for the page template.

    • Scroll down to the Top Navigation region.

    • Change the Velocity format to top-nav-custom located at _assets/top-nav-custom.

    • Save the configuration for the page template by clicking Submit.

Once completed, your custom Top Navigation will be applied to all configured page templates.