Mega Nav

Each top-level navigation item that has second-level items beneath it will have a mega-nav dropdown window, and these dropdowns have special content areas that are populated with Sections (under Content > Sections). The naming of these sections is important and is tied to the name of the top-level nav item in question.

Quick Start Instructions

  1. Go to CONTENT > Sections
  2. Create A Section with the titles of "Nav Section - Blank" where "Blank" matches the "Label" of the navigation item that it is associated with (i.e. if the Navigation item is labeled "About Us" then the section name should be "Nav Section - About Us"
  3. In each section, add content to the Content Editor. This content will show up on the right side of the dropdown menu.
  4. If you would like, you can also add an image to the Mega Nav Image field, which will show up on the left side of the dropdown menu.
  5. After you are done adding the Content and/or an Image, press save
  6. View the site (or refresh the tab that you already have the site opened in) and test to see if you are now seeing the Mega Nav for each dropdown, respectively.

*NOTE: See the more detailed instructions below if you have other questions.

Naming Convention

A top-level nav item with subpages that is called "About" will use a Section titled, Nav Section - Aboutto generate the mega-nav.

Managing Content

With the Section content editor, you can enter a heading and text that will show up on the right-hand side of the mega-nav. You can also use the optional "Meganav Image" field to designate an image that will show up on the left-hand side of the mega-nav. 

Using Icons

You can add a custom icon to a heading or button in the mega-nav (or just about anywhere else on the site) by adding the following code to a page element: <span class="icon icon-name"></span> . This will need to be added in the source code of your section/page.

Example: If you want to add a star icon to an H2 heading,
the code would look like this:

<h2><span class="icon icon-star"></span> Your Heading</h2>

List of available icons and their names: