Pre-Navigation

Overview

Adding pre-navigation to your navigation is useful if you have links, phone numbers, or anything you feel would be important to have at the top of your page. The content in pre-navigation will be displayed wherever you have your main navigation.

How To Use

To add pre-navigation to the navigation bar of your website you must do the following:

Add a pre-navigation container
Add your desired links

You can add as many items as you would like. By default, each pre-navigation item will have a | divider.

See Demo →

Markup

Place the HTML code in the Footer area of your page via the Code View editor. Toggle back to the live editor and begin editing/adding your links to the unordered list generated from the code you pasted.

HTML Example

<ul class="pre-nav">
  <li><a href="#">Pre-Nav Link</a></li>
</ul>

Styles

Place the CSS code in the Custom CSS box from the Advanced Site Settings panel. By default, your links will be separated by a pipe symbol (|). You can change this by adjusting the ::before style blocks content attribute.

CSS Styles

/*----- Pre-Navigation -----*/
.pre-nav {
  margin: 0 !important;
  padding: 0;
  font-size: .75em;
}

.pre-nav li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pre-nav li a {
  margin: 0 !important;
  font-size: 1em !important;
}

@media screen and (min-width: 820px) {
  .pre-nav li:last-child {
    margin-right: .5em;
  }
  
  .pre-nav li + li::before {
    display: block;
    margin: 0 .75em;
    color: #6c757d;
    content: "|";
  }
}

/*----- Pre-Nav: editing -----*/

.editable .pre-nav {
  border: 1px solid;
  border-radius: 4px;
  margin: 0 0 1.5em !important;
  padding: 0;
  overflow: hidden;
}

.editable .pre-nav::before {
  content: 'Pre-Navigation (shows above header navigation)';
  display: block;
  font-size: .75em;
  font-weight: bold;
  border-bottom: 1px solid;
  width: 100%;
  padding: .5rem 1rem;
  background: #ccc;
}

.editable .pre-nav li {
  display: block;
  margin: 0;
  padding: .5rem 1rem;
  border-bottom: 1px solid;
}

.editable .pre-nav li:last-child {
  border-bottom: none;
}

.editable .pre-nav li::before {
  display: none;
}

Initialize

Use the Javascript code provided and add it to the Footer Inject. This will place the pre-navigation items to the top of the navigation bar.

if(!window.suppress) {
  $('.pre-nav').prependTo('#main-navigation, #pull-out-nav .nav-wrapper');
}