- This topic has 23 replies, 5 voices, and was last updated 3 years ago by Gabriela.
-
AuthorPosts
-
November 18, 2020 at 11:17 pm #1537106kenNovember 19, 2020 at 9:23 am #1537909LeoStaffCustomer Support
Hi there,
I’m not seeing a site linked.
Can you provide it using the private info field?
Thanks 🙂
November 19, 2020 at 9:28 am #1537916November 19, 2020 at 9:53 am #1537947LeoStaffCustomer SupportYou can’t really change the line thickness but you can change the size if that helps:
#mobile-header .gp-icon.icon-menu-bars { font-size: 28px; color: #000; }
The text can be added using the label option in the customizer:
https://docs.generatepress.com/article/mobile-menu-label/November 19, 2020 at 9:58 am #1537951kenChanging the size is fine and the label seems to work as well. However, the color can’t be set in the default settings and I would also like to move both the hamburger and the menu to the left instead of the right.
November 19, 2020 at 10:02 am #1537952LeoStaffCustomer SupportNot sure if fully understand but try this CSS:
#mobile-header.main-navigation .inside-navigation { justify-content: flex-start; }
November 19, 2020 at 10:07 am #1537958kenthat was able to move the hamburger to the right side, what I need now is that both the menu label and hamburger to have the same color and also that they are vertically aligned and center of the whole sticky navigation. It’s currently slightly on the upper part of the navigation.
November 19, 2020 at 10:25 am #1537966LeoStaffCustomer SupportTry this:
.gp-icon.icon-menu-bars svg { top: .28em; } .menu-toggle .mobile-menu { color: #000000; }
November 19, 2020 at 1:18 pm #1538136kenit works, thanks!
November 19, 2020 at 4:58 pm #1538266LeoStaffCustomer SupportNo problem 🙂
April 4, 2021 at 4:00 pm #1721433GabrielaHi,
Is it possible to have a custom svg image for hamburger? And how to align it vertically centered, set padding to it and transparent background?April 4, 2021 at 4:38 pm #1721443ElvinStaffCustomer SupportHi Gabriela,
Sure you can but you’ll need a child theme’s functions.php or Code Snippets plugin as we’ll need the filter
generate_svg_icon
to apply the change.add_filter( 'generate_svg_icon', function( $output, $icon ) { if ( 'menu-bars' === $icon ) { $output = 'your <svg>..</svg> here'; } }15,2);
April 5, 2021 at 1:08 pm #1722519GabrielaHi Elvin!
This function is returning me a critical error to the site!This is what I have put in my child’s functions.php:
add_filter( 'generate_svg_icon', function( $output, $icon ) { if ( 'menu-bars' === $icon ) { $output = 'your <svg>http://localhost/salatherigathazazen/wp-content/uploads/2021/04/salatherigathazazen-hamburguer.svg</svg> here'; } }15,2);
April 5, 2021 at 1:10 pm #1722521LeoStaffCustomer SupportYou need to replace this part in Elvin’s code:
your <svg>..</svg> here
With the HTML of the SVG icon and not the link to the SVG file in your media library.
April 5, 2021 at 1:24 pm #1722532GabrielaPlease, where do I find the HTML of the SVG icon?
I use “Safe SVG” plugin. Even so?
When I deploy the site to the www server, will it recognize? -
AuthorPosts
- You must be logged in to reply to this topic.