[Support request] Custom Menu Toggle Hamburger

Home Forums Support [Support request] Custom Menu Toggle Hamburger

Home Forums Support Custom Menu Toggle Hamburger

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #365609
    Roman

    Hello, great theme. Thank you!

    How i can change default menu toggle icon with my custom.
    I found a good one hamburgers list, how i can replace default hamburger with this one https://jonsuh.com/hamburgers
    js, css already include in child theme.

    Best regards,
    Thank you

    #365754
    Tom
    Lead Developer
    Lead Developer

    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.

    #366343
    Roman

    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> 
    #366966
    Tom
    Lead Developer
    Lead Developer

    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
    }
    #491400
    Joseph

    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

    #491465
    Leo
    Staff
    Customer Support

    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.

    #491516
    Joseph

    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?

    #491705
    Tom
    Lead Developer
    Lead Developer

    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.

    #491775
    Joseph

    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.

    #491819
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #492426
    Joseph

    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.

    #492682
    Tom
    Lead Developer
    Lead Developer

    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";
    }
    #493033
    Joseph

    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.

    #493344
    Tom
    Lead Developer
    Lead Developer

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

    Let me know if it works now ๐Ÿ™‚

    #494195
    Daniel

    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/

Viewing 15 posts - 1 through 15 (of 23 total)
  • The topic ‘Custom Menu Toggle Hamburger’ is closed to new replies.