[Resolved] Custom Off Canvas Menu Icon

[Björn]

Hi.

All search results showed not exactly what I was looking for.

I have managed to customize the “Close” button of the Off Canvas Menu.

Now I’d like to change the hamburger icon to a custom icon (“member area”). I tried it with the code provided here but it did not work:
https://generatepress.com/forums/topic/svg-menu-icon-bars-fatter/#post-1520827

I put in the SVG code to where it says “YOUR SVG HTML HERE”:

<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 19.2 12.4" style="enable-background:new 0 0 19.2 12.4;" xml:space="preserve">
<path d="M15.8,6.7c0.8-0.5,1.4-1.4,1.4-2.4c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.3-2.8,2.8c0,1,0.6,2,1.4,2.4c-1.1,0.4-2.1,1.1-2.7,2.2
	C9.7,8,8.8,7.3,7.8,6.9c1-0.7,1.6-1.8,1.6-3.1c0-2-1.7-3.7-3.7-3.7S2,1.8,2,3.9c0,1.3,0.6,2.4,1.6,3.1c-2,0.8-3.5,2.8-3.5,5.2
	c0,0.1,0,0.1,0,0.2h1.1c0-0.1,0-0.1,0-0.2c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5c0,0.1,0,0.1,0,0.2h0.4h0.7H19c0.1-0.3,0.1-0.7,0.1-1.1
	C19.1,9.1,17.7,7.3,15.8,6.7z M5.7,6.5c-1.5,0-2.6-1.2-2.6-2.6c0-1.5,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6C8.4,5.3,7.2,6.5,5.7,6.5z"/>
</svg>

No change at all.

[David]

Hi there,

try:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $output = 'YOUR SVG HTML HERE';
    }

    return $output;
}, 10, 2 );

The difference being pro-menu-bars is for the hamburger toggle that GP Premium uses for the Off Canvas panel and the Mobile Header.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Björn]

No change unfortunately.

This is the complete code:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $output = '<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 19.2 12.4" style="enable-background:new 0 0 19.2 12.4;" xml:space="preserve">
<path d="M15.8,6.7c0.8-0.5,1.4-1.4,1.4-2.4c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.3-2.8,2.8c0,1,0.6,2,1.4,2.4c-1.1,0.4-2.1,1.1-2.7,2.2
	C9.7,8,8.8,7.3,7.8,6.9c1-0.7,1.6-1.8,1.6-3.1c0-2-1.7-3.7-3.7-3.7S2,1.8,2,3.9c0,1.3,0.6,2.4,1.6,3.1c-2,0.8-3.5,2.8-3.5,5.2
	c0,0.1,0,0.1,0,0.2h1.1c0-0.1,0-0.1,0-0.2c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5c0,0.1,0,0.1,0,0.2h0.4h0.7H19c0.1-0.3,0.1-0.7,0.1-1.1
	C19.1,9.1,17.7,7.3,15.8,6.7z M5.7,6.5c-1.5,0-2.6-1.2-2.6-2.6c0-1.5,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6C8.4,5.3,7.2,6.5,5.7,6.5z"/>
</svg>';
    }

    return $output;
}, 10, 2 );

[David]

Can i see the website ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Björn]

https://biancahoeltje.de/

[Björn]

Another strange thing: on mobile view only “Menu” appears (including hamburger icon) and it opens the off canvas panel instead of the regular primary navigation menu.

[David]

Try this snippet instead:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $svg = '<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 19.2 12.4" style="enable-background:new 0 0 19.2 12.4;" xml:space="preserve">
        <path d="M15.8,6.7c0.8-0.5,1.4-1.4,1.4-2.4c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.3-2.8,2.8c0,1,0.6,2,1.4,2.4c-1.1,0.4-2.1,1.1-2.7,2.2
       C9.7,8,8.8,7.3,7.8,6.9c1-0.7,1.6-1.8,1.6-3.1c0-2-1.7-3.7-3.7-3.7S2,1.8,2,3.9c0,1.3,0.6,2.4,1.6,3.1c-2,0.8-3.5,2.8-3.5,5.2
       c0,0.1,0,0.1,0,0.2h1.1c0-0.1,0-0.1,0-0.2c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5c0,0.1,0,0.1,0,0.2h0.4h0.7H19c0.1-0.3,0.1-0.7,0.1-1.1
       C19.1,9.1,17.7,7.3,15.8,6.7z M5.7,6.5c-1.5,0-2.6-1.2-2.6-2.6c0-1.5,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6C8.4,5.3,7.2,6.5,5.7,6.5z"/>
       </svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Björn]

YES! That did it! Thank you David!

Any idea on the mobile version of the menu? It should show the hamburger icon and when the visitor expands it the button of the Off Canvas menu will appear along with all other menu items.

But now it opens the Off Canvas directly

[David]

Glad to hear that.

Just to be clear – do you want your Custom Off Canvas menu icon to appear inside the normal Mobile Menu drop down ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Björn]

Yes, exactly

[Björn]

Does anyone have an idea why on mobile view the menu opens the Off Canvas menu instead of opening the primary menu with the button for the Off Canvas menu inside it?

[Fernando]

Hello there,

Would you like to disable the Off Canvas Menu for mobile? If so, you can do it in Appearance > Customize > Layout > Off Canvas Panel.

[Björn]

Hi Fernando.

I would like to have it like in the desktop version.

PRIMARY MENU
– Menu item 1
– Menu item 2
– Menu item 3
– Menu item 4
– Member area —> Off Canvas Menu
——————-Registration/Login
——————-Calendar
——————-Forum
——————-etc

[David]

Ok, so this is experimental so i am not sure how it will work but lets try 🙂

1. Customizer > Layout > Off Canvas and set the Display to Desktop Only.

2. Appearance > Menus -> Add a new Custom Link to your primary navigation.

Give it a Label of Member Area
Give it a URL of #

Give it a CSS Class of slideout-toggle hide-on-tablet hide-on-mobile

See here for how to add the CSS Classes:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

3. Add this CSS to your site:

@media(max-width: 769px) {
    .slideout-desktop .main-navigation.toggled .main-nav li.slideout-toggle {
        display: block !important;
    }

    .slideout-desktop .main-navigation.toggled .main-nav li.slideout-toggle a:before {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Björn]

Hi David.

That worked – half way. On Desktop view now there are two “Member area” buttons visible. One of it has the SVG icon from the first request.

But how come the Off Canvas menu opens directly in mobile view? Isn’t the Off Canvas menu meant to offer another menu? Is it supposed to be an alternative primary menu?

[Author]

Posts