← Back to Live Demo

Nav Bar Pro

Welcome to Nav Bar Pro

This is the official documentation for the Nav Bar Pro plugin. In an increasingly mobile-first world, providing a clear and accessible navigation experience is crucial for user engagement. Nav Bar Pro is designed to solve this by adding a professional, app-like sticky navigation bar to your WordPress site.

This guide will walk you through every feature, from basic installation to advanced customization, to help you get the most out of the plugin.

Installation

Follow these simple steps to install the plugin on your WordPress site.

  1. From your CodeCanyon downloads page, download the plugin's installable .zip file.
  2. Log in to your WordPress dashboard and navigate to Plugins > Add New.
  3. Click the "Upload Plugin" button at the top of the page.
  4. Choose the .zip file you just downloaded and click "Install Now".
  5. After the installation is complete, click "Activate Plugin".
  6. The "Nav Bar Pro" settings menu will now appear in your admin sidebar.
Plugin menu item in admin sidebar

Settings Panel Explained

1. Appearance Tab

This tab gives you full control over the visual design of the navigation bar.

  • Bar Position: Choose where the bar is fixed: `Bottom` (for a mobile app feel), `Left`, or `Right`.
  • Background Style: `Solid Color` provides a classic, opaque background. `Transparent (Glass Effect)` creates a modern, blurred background.
  • Color Palette: Use the color pickers to set the `Background Color`, `Icon Color`, `Active Color` (for text and icons), and `Inactive Text Color`.
  • Bar Style: `Full-Width` makes the bar span the entire screen edge. `Floating` gives it a modern, rounded look with margins.
  • Label Display: Control label visibility: `Show Always`, `Active Only` (for a minimalist look), or `Hide All`.
  • Typography: Select from popular Google Fonts or use your theme's default font for seamless integration.
  • Sizing & Spacing: Use sliders to control `Icon Size`, `Label Font Size`, and `Item Spacing` for a pixel-perfect design.
Appearance Tab Settings

2. Display Conditions Tab

This powerful feature lets you control exactly where the nav bar appears on your site.

  • Display Mode: Choose to `Show Everywhere`, `Show Only On Selected` pages/posts, or `Hide On Selected` pages/posts.
  • Target by ID: When using Show/Hide On, enter a comma-separated list of Post, Page, or Product IDs to apply the rule.
  • Show on Mobile Only: When checked, the bar will only be visible on tablet and mobile screen sizes, keeping your desktop view clean.
Display Conditions Tab Settings

3. Menu Source Tab

Choose how to populate your navigation bar with links and icons.

  • WordPress Menu: The quickest way to get started. Simply select one of your existing menus from `Appearance > Menus`. You can add icons by entering the icon class (e.g., `bi-house-fill`) into the menu item's "CSS Classes" field.
  • Custom Items: For full control, use the repeater to build your menu item by item. This allows you to add a custom label, URL, icon (from the Bootstrap icon picker or by URL), and a custom Google Analytics event name for each link.
Menu Source Tab Settings

4. Analytics Tab

Track user engagement by connecting Nav Bar Pro to Google Analytics.

  • Enable GA Tracking: A simple checkbox to turn the integration on or off.
  • GA Measurement ID: Enter your Google Analytics 4 Measurement ID (e.g., G-XXXXXXXXXX). Clicks on menu items will then be sent as events to your GA4 property.
Analytics Tab Settings

Advanced Usage

How to Find a Post/Page ID

To use the 'Show/Hide on Selected' feature, you need the ID of the post or page. Here’s how to find it:

  1. In your WordPress dashboard, navigate to Pages or Posts.
  2. Hover over the item you want, and look at the link preview in the bottom corner of your browser, or simply click 'Edit'.
  3. In the URL in your browser's address bar, look for post=. The number that follows is the ID.
  4. https://yourwebsite.com/wp-admin/post.php?post=123&action=edit
Finding Post ID

Frequently Asked Questions

1. Why is my navigation bar not appearing?

There are a few common reasons. Please check the following:

  • Is the plugin active? Go to Plugins and make sure Nav Bar Pro is activated.
  • Is the menu empty? Go to Nav Bar Pro > Menu Source and ensure you have items in your selected menu. The bar will not appear if it has no items.
  • Check Display Conditions: Go to Nav Bar Pro > Display Conditions and verify that your settings allow the bar to be displayed on the current page.
  • Caching Issues: If you are using a caching plugin, please clear your website's cache after making changes.

Changelog

### Version 1.0.0
- Initial Release.