Custom Menu Toggle Hamburger

A little tougher than that, but do-able.

Which specific style are you going for? We can't use their stylesheet, as we need to change some classes.

Leo,
thanks i know this method, but it uses a font awesome icon. I need something custom css or svg/img file.

Tom,
I add a this code to \gp-premium\menu-plus\functions\generate-menu-plus.php
and add display none for menu-toggle before, it works but its not a true way.
How i can implement this through function.php in child theme, or other better way for this.
or how i can change this icon with a custom img/svg/css for toggle and toggle opened action.

	<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" id="mobile-header"<?php echo $hide_sticky;?> class="main-navigation mobile-header-navigation">
		<div class="inside-navigation grid-container grid-parent">
			<?php do_action( 'generate_inside_mobile_header' ); ?>
			<button class="menu-toggle hamburger hamburger--squeeze" type="button" aria-controls="primary-menu" aria-expanded="false">
				<span class="hamburger-box">
					<?php do_action( 'generate_inside_mobile_menu' ); ?>
					<span class="hamburger-inner"><?php echo apply_filters('generate_mobile_menu_label', __( 'Menu', 'generatepress' ) ); ?></span>
				</span>
			</button> 

You can use the generate_inside_mobile_menu hook:

add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>
    <span class="hamburger-box">
        <span class="hamburger-inner">Menu</span>
    </span>
<?php
}

Hello there,

I would like to do a similar thing. However, I am not sure which hook to place this code in. I am also using Ionicons, and I just wanted to figure out exactly what I have to do to replace the menu toggle.

My site is challengemeto.com

That code needs to be added with one of these method: https://docs.generatepress.com/article/adding-php/

Code Snippet is the easiest one unless you are using a child theme.

Hello,

I installed code snippets successfully and inputted Tom's code exactly as I found it. But I didn't see any effect.

Are there any additional steps required that I am missing?

We'll be using the new Font Awesome 5 icons in the next GP update - they're much nicer.

If you're loading your own font, you can use CSS to overwrite the icon:

.menu-toggle:before {
    content: "\f0c9";
    font-family: FontAwesome;
    line-height: 1em;
    speak: none;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;
}

Just adjust the font-family and content to your specific font.

Worked like a charm, Thank you Tom and Leo!,

How would I change the close menu icon?

Also, how would I change the search icon? Using similar code, I was able to add the icon, but not replace the original (the effect being that there is now two)
Never mind, fixed it with this code in case anyone else is interested.

.search-item a:before{
	    content: "\f4a5";
    font-family: "Ionicons";
    line-height: 1em;
    speak: none;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;
	font-size: 20px;
}

Font Awesome 5 will be very welcome, in a future update, it might be nice to also have font loading as well as part of the premium options.

Continue doing your great work. I'm sure you hear this all the time, but this is by far the best customer support I have ever dealt with, and definitely one of the best themes.

Here's how you would do the close icon:

.main-navigation.toggled .menu-toggle:before {
    content: "\f00d";
}

Thank you! Glad you're enjoying the theme :)

Hello There,

The closed icon didn't work. To be 100% sure it is not just me, this goes in the customizer CSS exactly as written? Also, how would you do the same for the search icon toggled? Sorry for asking so many questions.

Yes, that CSS should do it, but you would have to update the content value to the unicode of your custom icon.

As for the search icon, you would do this:

.main-navigation .search-item i {
     display: none;
}

.main-navigation .search-item a:before {
    font-family: FontAwesome;
    content: "\f002";
}

.main-navigation .search-item.active a:before {
    content: "\f00d";
}

Hello,

The search icon works great, but the menu code still doesn't work. I am using a different icon and I have specified the font family.

.toggled .menu-toggle:before {
     content: "\f129";
    font-family: "Ionicons";
}

What else can be done? Sorry for asking so many questions.

I just adjusted the CSS above: https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/#post-491819

Let me know if it works now :)

Wouldn't it be better to just stick an SVG icon in there nowadays?

It would be even easier than using the FontAwesome method because no CSS would be needed, just paste the code of the SVG icon into the hook.

These super lightweight ones are ideal http://jxnblk.com/geomicons-open/