Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Support request] Custom Menu Toggle Hamburger

Home Forums Support Custom Menu Toggle Hamburger

This topic contains 22 replies, has 6 voices, and was last updated by  Leo 1 month, 1 week ago.

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

    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

    GP Premium 1.4.2
    #365754

    Tom
    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

    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

    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

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

    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

    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

    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

    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

    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

    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

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

    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)

You must be logged in to reply to this topic.