Beaver Builder theme: adding text to a mobile menu icon
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;
}