[Resolved] reposition hamburger menu

[ken]

Hi there,

I am trying to move the hamburger menu and restyle it (thicker lines, change the color and shape and add the word menu beside it). Can you help me out on that? Here is the site.

Thanks!

[Leo]

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

[ken]

https://gemmarosefoundation.org/

[Leo]

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

[ken]

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.

[Leo]

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

[ken]

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.

[Leo]

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

[ken]

it works, thanks!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabriela]

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?

[Elvin]

Hi 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?"

[Gabriela]

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

[Leo]

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

[Gabriela]

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?

[Author]

Posts