Beaver Builder theme – adding text to a mobile menu icon

26th May 2016

The Beaver Builder theme offers two default menu buttons for  Mobile devices. A text version and an icon version, but it’s an easy job even for new learners to have both.

In this short video I’ll show you how I  added text that the “hamburger”  icon. The one that looks like this  ≡.

Here’s the Beaver Builder code snippets:

Add this to the Beaver Builder Child theme’s functions.php file:

//Adds the Word "MENU" to the Hamburger icon on mobile views
function my_nav_toggle_text( $text ) {
 return '<span style="font-size:11px;">MENU</span><br>
 <i class="fa fa-bars" aria-hidden="true"></i>'; 
}
add_filter( 'fl_nav_toggle_text', 'my_nav_toggle_text' );

Here’s the CSS to add or adjust.
Note: In the video I show how to add to the Beaver Builder theme customizer, but as you will be working in the child theme a good place to put the css is in the style.css file (thanks to Michael Kemp questioning this).

.fl-page-header .fl-page-nav .navbar-toggle *
{
color: #111111;
top: -6px;
position: relative;
line-height: 0.9;
font-size: 28px;
}
Posted in ,

Please share this post:

Share on PinterestShare on LinkedIn

DWcircle

David Waumsley

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

4 Comments

  1. Rick Rick on 22nd July 2016 at 4:16 pm

    I accomplished this on one site and loved it so much I thought I would add it to another. Unfortunately when I go into the editor and hit update I get this fatal error

    Fatal error: Call to undefined method WPaaS\Cache::flush() in /home/content/a2pnexwpnas03_data02/34/3329834/html/wp-content/mu-plugins/gd-system-plugin/includes/admin/class-file-editor.php on line 124

    I did everything exactly the same as the other site but now I am not able to update the child theme. Any ideas what I may have done wrong?

    Thank You
    Rick

    Reply
    • David Waumsley David Waumsley on 22nd July 2016 at 6:06 pm

      Hi Rick,
      Are you using multisite? If it normal single install it is an odd one as I normally don’t have anything in my mu-plugs folder.
      I saw this:
      http://stackoverflow.com/questions/25912469/php-notice-undefined-offset-in-class-gd-system-plugin-config-php

      and someone mentioned that is was something Godaddy added (but they were not on GoDaddy) and also said the issue went away.

      I don’t know what you have, but I would probably clear all caches and take anything out of that folder. (keeping a copy of course)

      Sorry again :-(

      Reply
  2. Thomas Thomas on 2nd February 2017 at 3:31 pm

    I think this works really well, but adding the CSS just makes more issues. It works beautifully without any CSS additions. I’d be better if the SPAN around menu had a class and then tell people to add their own styles. Otherwise, it’ll inherit from the builder.

    Either way, it’s working great. Such a simple solution. Thanks.

    Reply
    • David Waumsley David Waumsley on 3rd February 2017 at 8:43 am

      Good points Thomas. Thanks for dropping by and commenting.

      Reply

Leave a Comment