- This topic has 23 replies, 5 voices, and was last updated 1 week ago by
Gabriela.
-
AuthorPosts
-
November 18, 2020 at 11:17 pm #1537106
ken
November 19, 2020 at 9:23 am #1537909Leo
StaffCustomer SupportHi there,
I’m not seeing a site linked.
Can you provide it using the private info field?
Thanks 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 19, 2020 at 9:28 am #1537916November 19, 2020 at 9:53 am #1537947Leo
StaffCustomer 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/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 19, 2020 at 9:58 am #1537951ken
Changing 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 #1537952Leo
StaffCustomer SupportNot sure if fully understand but try this CSS:
#mobile-header.main-navigation .inside-navigation { justify-content: flex-start; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 19, 2020 at 10:07 am #1537958ken
that 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 #1537966Leo
StaffCustomer SupportTry this:
.gp-icon.icon-menu-bars svg { top: .28em; } .menu-toggle .mobile-menu { color: #000000; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 19, 2020 at 1:18 pm #1538136ken
it works, thanks!
November 19, 2020 at 4:58 pm #1538266Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 4, 2021 at 4:00 pm #1721433Gabriela
Hi,
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 #1721443Elvin
StaffCustomer 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);
A wise man once said:
"Have you cleared your cache?"April 5, 2021 at 1:08 pm #1722519Gabriela
Hi 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 #1722521Leo
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 5, 2021 at 1:24 pm #1722532Gabriela
Please, 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.