How to change hamburger menu icon to custom image?

Customization
, ,
1

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.

2

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.

3

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!

4

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

5

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;
}
6

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?

7

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

8

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
2 Likes
9

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:

10

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
11

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

12

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

13

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:

14

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';

1 Like
15

@Danny CSS is not the most user friendly method for this.

Would it be possible for you guys to add a filter for this? The coded include makes it kind of hard to output your own svg if you want to. Something like:

apply_filters( 'fl_hamburger_svg' , file_get_contents( FL_BUILDER_DIR . 'img/svg/hamburger-menu.svg' ) );

So that we can simply overwrite the filters output with the new svg, while adding the correct classes to our DOM-elements.

Image below is done that way, but of course gets overwritten once the plugin updates.

2020-06-19 (2)

1 Like
16

HI i am lost! is this method working to replace the svg or make the hamburger icon a png or something like that?

17

Just what I was looking for!!

Thanks - and it’s great to see such high-level customizability implemented, even the Mother of All Template Overrides (aka WooCommerce) doesn’t offer the ability to change e.g. module jQuery configurations on child theme level.

18

FYI, the old KB article on overriding modules does not redirect. Here’s the new link: https://kb.wpbeaverbuilder.com/beaver-builder/developer/custom-modules/cmdg-18-override-built-in-modules

19

There was also a filter fl_builder_mobile_menu_icon added in BB 2.5.x at somepoint to enable this icon change for the hamburger.

So something like this works now:

add_filter( 'fl_builder_mobile_menu_icon' ,
  function($icon) {
     return file_get_contents( get_stylesheet_directory() . '/new-icon.svg' );
  }
);
1 Like
20

In my case, i use pure CSS feature.
Can be adapt to standard menu module or extension

(for Ultimate addon`.uabb-svg-container {
width: 50px !important; /* Adjust size */
height: 50px !important; /*Adjust size */
background-image: url(‘image_url_from_media_librairy’);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}

/* hide original hamburger menu */
.hamburger-menu {
display: none;
}`

Have a nice day !