- This topic has 22 replies, 6 voices, and was last updated 5 years, 11 months ago by Leo.
-
AuthorPosts
-
August 14, 2017 at 3:57 am #365609Roman
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 youAugust 14, 2017 at 9:25 am #365754TomLead DeveloperLead DeveloperA 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.
August 15, 2017 at 7:18 am #366343RomanLeo,
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>
August 15, 2017 at 11:32 pm #366966TomLead DeveloperLead DeveloperYou 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 }
February 8, 2018 at 7:55 am #491400JosephHello 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
February 8, 2018 at 9:36 am #491465LeoStaffCustomer SupportThat 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.
February 8, 2018 at 10:44 am #491516JosephHello,
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?
February 8, 2018 at 4:05 pm #491705TomLead DeveloperLead DeveloperWe’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
andcontent
to your specific font.February 8, 2018 at 6:33 pm #491775JosephWorked 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.
February 8, 2018 at 8:15 pm #491819TomLead DeveloperLead DeveloperHere’s how you would do the close icon:
.main-navigation.toggled .menu-toggle:before { content: "\f00d"; }
Thank you! Glad you’re enjoying the theme ๐
February 9, 2018 at 11:00 am #492426JosephHello 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.
February 9, 2018 at 8:30 pm #492682TomLead DeveloperLead DeveloperYes, 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"; }
February 10, 2018 at 9:23 am #493033JosephHello,
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.
February 10, 2018 at 9:00 pm #493344TomLead DeveloperLead DeveloperI just adjusted the CSS above: https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/#post-491819
Let me know if it works now ๐
February 12, 2018 at 2:22 am #494195DanielWouldn’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/
-
AuthorPosts
- The topic ‘Custom Menu Toggle Hamburger’ is closed to new replies.