With the start of 2017, we’ve put together a new WordPress plugin called BNE Navbar. Our new plugin adds a functional bottom navigation or toolbar to any WordPress theme. While primarily meant for touch and mobile devices, BNE Navbar can also be used on a full-size desktop website as it’s been tested in a variety of browsers to ensure it works the same everywhere.
Have you ever needed an additional mobile navigation, toolbar, or call to action buttons to make your responsive website look like a native iPhone or Android App? Maybe you just need a few call to action buttons. BNE Navbar brings all of this to your WordPress website. With our plugin, you can create a fixed toolbar that displays on the bottom of your website providing easy to reach links to other pages of your website, external social profiles, or use it for a responsive off canvas custom menus.
Use it as a Mobile Menu
Does your theme not provide a mobile menu, or perhaps may no longer work? BNE Navbar can fill the needs for your mobile website. Quickly setup your most important links and then include a final nav button that opens a custom menu that is always visible to the user no matter where they have scrolled within the page.
Call To Action to the Rescue!
Have an important SEO campaign running? Need an easy way for users to call you? With BNE Navbar, you can set a single nav button or many and set the button link to a telephone number.
There are many uses for a fixed menu or toolbar for your website. Help guide your users to the most important areas of your website with BNE Navbar.
Simple Menu Settings
The options page allows you to set the navbar styles and number of buttons to include. In addition, you can control when the navbar displays based on the traditions screen sizes – mobile, tablet and or desktop. Each button in the navbar can link to any URL, or open a custom menu.
Custom Menus
Each nav button can link to a page or a hidden custom menu. You can completely use this as your website’s mobile navigation system.
Per Nav button customizations
Each nav button can be customized with a unique icon/image, title, and link either to an external or internal page, or open a hidden custom menu. No limit to the number of buttons you need to display. Choose over 600 beautiful vector icons from Front Awesome or upload your own image instead.
View the demos and learn more about BNE Navbar here or by clicking the product display below.
HI, this looks great, however i cant locate it in the wordpress plugin store. Please advise 🙂
Hello, this plugin is not available the WordPress Plugin Directory, but rather a plugin I sell here.
Hi, can i add search layer?
thanks
Hi there, there is not an admin option to add one but one can be added using the various hooks.
Hi, this plugin is very useful for me. but in some part i felt it is to high for the design, is it possible to change the height of the menu?
Hi Judy, Yes you can with CSS by adjusting the size of the icons and font size of the titles.
Hello, is it possible to use only text in the bar, without icons?
Most definitely. Both the button icon and title are optional.
Hello, does this plugin work with pagebuilders like elementor? Thanks
Should be no problem. The markup of the navbar is sent to the footer of the site and is not in relation to the page content or a page builder. As long as your theme uses
wp_footer(), usually found in footer.php of your theme, then you should be fine.can it integrate tawkto? so that when someone clicks the chat icon it pop ups the tawkto live chat box?
Sure. According to their site, the chat box can be triggered using a URL link. However, because I use esc_url on the link output for security. You’ll need to use JS to inject the javascript link on the nav button. Pretty easy to do and I can provide the JS needed to make it happen for you.
Good day, would it be possible to highlight active/selected button?
Since the URL entered is a custom URL and not directly attached to a page ID, you would need to use CSS to apply a style to show the active state of the button. Each button accepts a class that you could use to do this.
Good day.
How should I conditionally apply the CSS to highlight a button?
Should I edit the PHP source code or just inject javascript.
Never edit source files as when the plugin next updates, your changes will be removed. Add a class to the Nav button in settings. Then target that class base on the page ID. For example, if the page id is 2, and you added the class
is-active-pageto the nav button, your CSS would look like this:body.page-id-2 .bne-navbar-btn-wrapper.is-active-page { background: rgba(0,0,0,.1); box-shadow: inset 0px 0px 4px rgba(0,0,0,.1); }Alright, thanks a lot.
Good day, how do I skip rendering the bottom menu for a particular page?
Base it on the page ID and hide the navbar div.
body.page-id-2 #bne-navbar { display: none; }Hi, my website currently has two languages and my menu items changes based on the language insertion point chosen by the user. For example, an English version would have pages (home, product, contact us) but when the user chooses the Chinese language then it will change accordingly. Does this work for this plugin on mobile devices? I am not looking for a translation plugin but to check whether if this plugin supports the functions I want. Thank you
If you’re using a translation plugin already such as WPML, then you can translate the strings from there. If you’re not or if the nav button links are going to be different, then you can create two sets of the buttons. For example, if you’re wanting to have 3, then you’ll need to create 6 total (3 for each language. Then you can hide the buttons with CSS for the other language based on a class – assuming you are adding or have a class defined the html or body tags for the language type.
Hi, I want to know if I can have different menus depending on your WordPress role. Such as an author will see a different menu then a normal user. Also, hide it from non-logged-in users.
The plugin can’t provide that for menus. However their may be a plugin that adds that functionality directly to the menu where you can set those options in Appearance > Menus.
Hiding a nav button or the Navbar based on being logged in/out can be done with a single line of css.
What if they aren’t menus? Can I show different tab options to different users?
Only with CSS, you would need to add a class to the body tag based on the user role that way you can target those users and hide the individual button.
If I purchase your plugin is this something you can help me get working? I am not familiar with CSS.
Yes I could. Basically you would set a class for each nav button to target with. next you need to include a class to the body tag that shows the current logged in user’s role. From there, you can hide/show the nav buttons on that.
How many roles are you planning this on?
Thanks, I just purchased the plugin.
I would need pretty much 3 different navs
1. No nav to non-logged in users
2. Navigation for normal member roles
3. Navigation for authors roles
2 and 3 will have some navigation buttons the same but just some different
example:
2.
Newsfeed/Models/Messages/Account/Bookmarkes
3.
Newsfeed, Messages, Account, Earnings
Sounds good. Send a support ticket from your account and we’ll go from there. I would need admin access and FTP, otherwise, you would need to add the code yourself from my email.
hi
it seems to only work if you are logged in.. is possible?
ps. avada theme
The navbar shows for both logged in and logged out users. You can use CSS to hide/show based on your needs.
it’s completely invisible if I’m not logged in…
I just took a look at your site on mobile, and the navbar is there. Green with a diamond icon. Here’s a screenshot. Did you try clearing your cache?
I turned off and on again many plugin, and now it works, thanks!