Hero Nav To The Rescue

The primary navigation is one of the most important elements of your website. It’s one of the first things your visitors are likely to see and interact with. Don’t let them down.

Hero Nav gives you the right amount of options to make creating a professional navigation that is catered to your needs, incredibly fast and easy. You’ll wish it could fly around the planet backwards to go back in time so you could have it yesterday!

There it is!

If you’re still looking for it, you’re probably looking right at it!  Hero Nav is the only navigation used on this demo site.  Look up there!  Below the logo — there it is!

Use the tabs here to learn more, and use the nav try it out!  For a detailed walkthrough, check out the video!

Hero Nav is DMS Ready as of version 1.1!

Installation

If you’re already using Hero Nav and upgrading your site to DMS, it’s important to remove the old version first.  Sections are installed differently in DMS so it is possible for the old and new versions to be active at the same time which will cause problems.

To remove the old version, simply delete the `hero-nav` folder from path-to-wp-content/plugins/pagelines-sections.  Your settings are preserved in the database so not to worry there.

Settings

Settings can be found under the Site Settings tab of the toolbox.

Home Team Colors

No preset one-size-fits-all color themes here. With Hero Nav you can easily create the perfect color scheme that’s right for your website; the possibilities are endless!

Choose your own:

  • Base (background) color & opacity
  • Base Text color
  • Corner control (border radius)
  • Height
  • Shadow on/off
  • & more!
hero-nav_color_settings

Use these settings to get the same colors as the demo

Enhance Your Background With a Slick Gradient Before You Can Finish Reading This

Gradients are one of those things that can either make or break something visually.  Hero Nav gives you the ability to easily enhance it’s background with a gradient that you can dial in with laser-precision to give it an added professional & polished look.

Not just a few color pickers, Hero Nav employs intuitive options for setting gradient colors relative to the base background color (lighter/darker).

hero-nav_gradient_options

Font Control

Not only does Hero Nav give you control over the text/link color, but you can easily change the font you want too, including the ability to adjust font-size. Both font and size options are available for top-level items as well as dropdown menus!

hero-nav_font_options

To Drop or Not To Drop? (and when!)

Click, hover, or not at all, Hero Nav let’s you choose how it’s dropdown menus should work.

hero-nav_dropdown_trigger

No Menu Item Left Behind

The “stock” NavBar was the first PageLines section to bring dropdown menus on click rather than hover. While not exclusive to PageLines, this new paradigm was met with mixed feelings.

The reason for the change comes down to user intent – only showing dropdown menus when the user is directly intending to. Having menus fly out on hover/mouseover can cause a mess of menus to fly out all over the place, without intentionally intending on revealing them.

Some of the complications this created involved top-level menu items (the one you click on to show the dropdown menu) not working if they are links. This was particularyly confusing in the responsive/mobile view where there is no dropdown functionality happening, but the top-level links are not working.

Hero Nav addresses this very issue by dynamically cloning the top-level link and adding it as the first item in the dropdown list (but only for valid urls).

hero-nav_added_menu_item

hero-nav_sample_page_menu_setup

Responsive Features

When the screen drops below a certain width, Hero Nav transforms into its mobile-friendly view.

The responsive view maintains all of the custom styling, with a few differences between modes.
The main difference being between the hover & click dropdown modes.
The click mode maintains the dropdown functionality by only expanding & revealing dropdown menu items when the top-level menu item is clicked (similar to the desktop/normal view).
In this mode, the navigation takes on an accordion-like behavior, only showing one expanded dropdown at a time – saving valuable screen space on mobile devices.
The hover mode always shows all dropdowns fully expanded.