How to change hamburger menu icon to custom image?

Is it possible to change the mobile hamburger menu icon to an image of my own?
I’m trying to do it in the custom tool css settings. I am using the bb themer.

Hi Tom,

When you say BB Themer do you mean the BB theme or Beaver Themer to create your header and therefore, are using the Menu module?

Both methods would require custom CSS. If you let me which method you’re using I can provide the CSS to add your own image.

Thanks for your help! Yeah I am using the Beaver Themer to create my header. If you could provide the CSS that would be great!

Hi. I also want to change the hamburger menu icon to my own svg. I’ve used Beaver Themer to create a custom header but need to change the 3 svg lines to a custom one. Please can someone help? Many Thanks

This is the CSS to customize the hamburger icon for BB Theme:
• Pick your specific icon’s unicode at https://fontawesome.com/icons?d=gallery
• Insert the custom CSS (real hamburger icon here):

.navbar-toggle .fa-bars:before {
    content: "\f805";
}

It’s different with a Themer Header cause the menu module uses a SVG instead of a Font Awesome icon.
I don’t know how to change a SVG but we can hide it and replace with a FA icon, something like that:

.fl-menu .fl-menu-mobile-toggle.hamburger .svg-container {
	display: none !important;
}
.fl-menu .fl-menu-mobile-toggle.hamburger::before {
	content: "\f805";
	width: 1.4em;
	height: 1.4em;
	font-family: "Font Awesome 5 Free";
	font-size: 1.4em;
	font-weight: 900;
}

Thanks @avanti, that may help someone else, but not my issue.

This is what I can see of the burger menu:

<button class="fl-menu-mobile-toggle hamburger" aria-label="Menu"><span class="svg-container"><svg version="1.1" class="hamburger-menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<rect class="fl-hamburger-menu-top" width="512" height="102"></rect>
<rect class="fl-hamburger-menu-middle" y="205" width="512" height="102"></rect>
<rect class="fl-hamburger-menu-bottom" y="410" width="512" height="102"></rect>
</svg>
</span></button> 

so I’d like to actually replace those 3 rect items with a custom one.

Anyone else able to help please?

Well, it should be possible to swap the SVG markup with your own using JS then. :wink:

Otherwise you can only get it this way.

  1. Create fl-builder/modules folder inside your theme folder
  2. Copy&paste the menu module from bb-plugin/modules to fl-builder/modules folder
  3. Now edit the menu module’s file (may be it is menu.php file. render_toggle_button method) from your theme folder

Thanks for this. I can’t seem to get the copied menu.php file to load in Beaver Builder. Could this be due to the file reference from a different folder?
The only way I have managed to get it working so far is by replacing the existing hamburger-menu.svg in the plugin folder, but obviously this isn’t sustainable when the plugin is updated. Any help is greatly appreciated :slight_smile:

As said @wpbeaverworld: https://kb.wpbeaverbuilder.com/article/624-cmdg-18-override-built-in-modules
To be done in a child theme preferably.

1 Like

Thanks, I’ve tried that, but still no luck getting it working

what are you getting now? Are you able to edit the module’s file from your theme folder location?

All I see in the BB editor is blank column sections where the menus should be showing. I can edit these using BB, but it’s not showing the menus like it should.
I can edit the modules file in the theme folder yes, I’m developing this site locally too. :+1:

In case anyone else needs this, this is how it worked:

Move the SVG file to the child theme root directory and changed LINE 175 of the file called menu.php from the customized Menu module.

Original code:

include FL_BUILDER_DIR . 'img/svg/hamburger-menu.svg';

New code:

include FL_CHILD_THEME_DIR . '/img/svg/hamburger-menu.svg';