[Resolved] Custom Off Canvas Menu Icon

Home Forums Support [Resolved] Custom Off Canvas Menu Icon

Home Forums Support Custom Off Canvas Menu Icon

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #2319769
    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.

    #2319796
    David
    Staff
    Customer Support

    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.

    #2319809
    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 );
    #2319816
    David
    Staff
    Customer Support

    Can i see the website ?

    #2319823
    Björn
    #2319846
    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.

    #2319852
    David
    Staff
    Customer Support

    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 );
    #2319857
    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

    #2319900
    David
    Staff
    Customer Support

    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 ?

    #2319902
    Björn

    Yes, exactly

    #2322027
    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?

    #2322039
    Fernando
    Customer Support

    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.

    #2322101
    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

    #2322168
    David
    Staff
    Customer Support

    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;
        }
    }
    #2322709
    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?

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.