Last Updated on April 29, 2019
Filed under Plugins

Navbar

BNE Navbar is a premium mobile menu and toolbar plugin for WordPress. Designed with mobile phones and tablets in mind, it is quick, reactive and super comfortable to use. Each nav button within the navbar can either link to a page or open a hidden custom menu. There is not limit to the number of nav buttons and hidden custom menus.

Navbar Overview

Installation

You can install BNE Navbar two ways, either unzip your download, FTP to your server and upload the bne-navbar folder to /wp-content/plugins/ OR you can install/upload the zip file, “ben-people.zip” file you downloaded.

upload

Uploading/Installing via WordPress:

  1. Go To Plugins > Add New
  2. Click on Upload
  3. Click “Choose File” and drag “bne-navbar.zip” (This file may be inside your downloaded zip file).
  4. Active BNE Navbar
  5. After you have installed and activated BNE Navbar, a new option will be added under the Settings admin menu labelled "BNE Navbar".

Plugin Settings

The settings page for the navbar can be found under the main Admin Menu > Settings > BNE Navbar. Here you will be able to make the following changes to how the plugin is displayed.

Navbar Settings Admin Page.

 

Visibility - (Optional) Check the appropriate screen widths that you would like to hide the navbar.

Icon Set - If checked, the included font Awesome library (css) will be used. If your theme or another plugin is also providing this library, you will probably want to uncheck this so that the file is not enqueued twice. The version shipped with BNE Navbar is currently version 4.7 of Font Awesome and relies on the icon prefixes of "fa-".

Nav Bar Background - This is the color of the toolbar background. The color picker allows also setting an rgba value to give it an opacity look.

Icon Color - The color of the vector icon.

Title Color - The color used for the button title below the icon.

Nav Button Settings

In addition to the global settings above, each Nav Button also includes customizations. You can build as many nav buttons as you see fit. However keep in mind the available space depending on the website being viewed on mobile, tablet, and desktop. If the navbar will be shown only on mobile, we recommend no more than 5 nav buttons.

Navbar Button Options

Title - (optional) The name given to the nav button. The title is displayed below the icon/image. Leave blank to not display the title.

Vector Icon - Uses the Font Awesome library and accepts the name of the icon you wish to use. The library included with BNE Navbar is currently v4.7 and includes over 600 icons. You can view a full list of available icons here. Leave blank to use a custom image instead.

Image Icon - Upload or select an existing image from your media library to use as the nav button icon. For best results use a square image 45x45. Note that the display of the image has a CSS max-height of 45px. Leave blank to use a vector icon instead.

Behavior - Select whether the button, when clicked, should open a page or a custom menu.

Destination URL - (behavior as page only) This will be the URL of the linked page which can be an internal or external URL.

Select a Custom Menu - (behavior as menu only) This will allow you setting the appropriate custom menu you have created in Appearances > Menus.

Menu Heading - (behavior as menu only) This will allow you to give the hidden panel a heading at the top.

Menu Background Color - (behavior as menu only) This will allow you setting a solid or rgba color value using a color picker.

Menu Link Color - (behavior as menu only) This will set all typography within the custom menu to be either light (white) or dark (black). Choose light if the menu background will be dark and vice versa.

Custom Menu Hash Links

Typically a link from a custom menu, when clicked, will open onto a new page or reload the current page. However, If using a #link (hash link) or perhaps your theme uses ajax, the page will not reload thereby will not close the opened Navbar menu. To get around this, include the class, bne-close-navbar, on menu item. You will add this classname to the menu item itself in Appearance > Menus. If class field is not shown, go to the top right and click on Screen Options, there you will see an option to enable classes.

This same process can also be used for any link within an open nav bar panel if adding custom content via the bne_navbar_menu_before and bne_navbar_menu_after hooks detailed below.

Text, Email, Phone Links

Phone, Email, and Text (SMS) links can be used for any nav button. To use these, format the URL according to the HTML spec for each. Create a nav button as normal and set the behavior as "Opens another page". This will give you the destination URL field.

Phone Number (tel)

In the Destination URL field, begin with tel: followed by the phone number. The number should begin with the country code and no dashes, periods or spaces. Example: tel:14455458787

Email Address (mailto)

In the Destination URL field, begin with mailto: followed by the email address. Example: mailto:john@johnwayne.com. In addition, most email clients can take advantage of a number of query arguments such as prefilling the subject line, CC, BCC, and body text. Example: mailto:john@johnwayne.com?subject=Mail from our website

Text Message (sms)

SMS works similar like tel. In the Destination URL field, begin with sms: followed by the phone number. The number should begin with the country code and no dashes, periods or spaces. Example: sms:14455458787

WordPress SMS support. For security, we escape the output of the destination field to be that of a URL scheme. By default WordPress does not include sms as a valid URL. To include sms in WordPress links using esc_url(), you will need to include this filter. You can add it to your active theme's functions.php file.

Filters, Hooks and Customizations

BNE Navbar comes with a number of hooks and filters that allows you to further customize, change, hack, and expand the output. If you need help with filters and hooks, please check the WP Codex.

Name Type Arguments Description
bne_navbar_fa_prefix filter string returns "fa-". This is the prefix used for the Font Awesome icon classname. If you are using an older or different version of Font Awesome, perhaps provided from your theme, you may need to adjust this prefix.
bne_navbar_menu_before action $i Allows adding any type of additional content before the custom menu. $i - pulls in the current count of the nav button allowing you to target an individual hidden custom menu panel. Bonus, setting a custom menu in the nav button settings is not required to display the hidden panel.
bne_navbar_menu_after action $i Allows adding any type of additional content after the menu. $i - pulls in the current count of the nav button allowing you to target an individual hidden custom menu panel. Bonus, setting a custom menu in the nav button settings is not required to display the hidden panel.