Fixed Bottom Menu for WordPress

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.

  1. HI, this looks great, however i cant locate it in the wordpress plugin store. Please advise 🙂

  2. Hi, can i add search layer?
    thanks

  3. 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?

  4. Hello, is it possible to use only text in the bar, without icons?

  5. 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.

  6. 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.

  7. 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.

  8. 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-page to 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);
      }
      
  9. Good day, how do I skip rendering the bottom menu for a particular page?

  10. 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.

Leave a Reply to Cheng Cancel Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>