The purpose of this tutorial is to give you a good understanding of how to use the NavBar section inside of the PageLines framework.

Introduction

The NavBar section allows you to display a dropdown main navigation at the top of your site. It supports drop down functionality, multiple color schemes and the WordPress menu system.


Adding to your Template

The Navbar section can be placed in the Header Template area only.

  1. Select the “PageLines” panel, then “Drag and Drop”
  2. Select the Header Template area
  3. Drag & Drop the “NavBar” section from the “Available/Disabled Sections” into the “Active Sections” list

Configuration

Once you have added the NavBar Section to your preferred template, you will want to use the settings to set it up the way you’d like.

From your WordPress Administration Panel:

  1. Select the “PageLines” panel, then “Site Options”
  2. Select the “NavBar” tab

NavBar and Fixed NavBar Theme

Both the Fixed Nav and NavBar come with 5 selectable themes. These themes control the background color of the bar, and text color of the menu inside the bar.

This allows you to adapt the NavBars graciously to fit into nearly every design, and you have the ability to select them independently.

NavBar and Fixed NavBar Menus

The NavBar and Fixed NavBar use the WordPress Menu System, just like the Nav Classic and BrandNav sections.

In this section, you can select which menu you would like to use for each navigation bar, which allows for a powerful combination.

NavBar and Fixed NavBar Configuration Options

These settings allow you to control various appearance options for both the Fixed Navigation and NavBar section.

There are four options to choose from, two for Fixed Navigation and two for the NavBar section, theses are;

  • Fixed NavBar – Align Menu Right? (Defaults Left) – This aligns the Fixed Navigations menu items to the right hand side.
  • Fixed NavBar – Hide Searchform? – This removes the Searchform from the Fixed Navigation.
  • Standard NavBar – Align Menu Right? (Defaults Left) – This aligns the NavBar menu items to the right hand side.
  • Standard NavBar – Hide Searchform? – This removes the Searchform from the NavBar section.

NavBar Title

Applies text to the NavBar to serve as a title, but is only displayed on small screens, such as phones and tablets.

Get PageLines Framework Now →