How to replace mobile menu icon with а custom icon?

Hi there,

Take a look at this:
https://docs.generatepress.com/article/generate_svg_icon_element/

Let me know :)

Thanks! I added the code via the Code Snippets plugin.

Here's how it looks:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
if ( 'menu-bars' === $icon ) {
$output = '<svg>menu-symbol-mobile-small-2</svg>';
}
return $output;
}, 10, 2 );

It shows a blank icon now. Tried with the full url too but it still didn't work. https://prnt.sc/26i6ip2
I can press on the blank space and it opens the menu though.

You will need to add in HTML of the actual icon and not the image file name or link.

I wouldn't recommend switching unless your custom icon is in SVG format already.

Add in HTML of the actual icon? I'm sorry, I'm a bit newb technically and don't know what you refer to.

Before it's worth answering this, I want to tell you that the menu icon in png format is 1kb, while in svg its 4kb. Is it better to use the png instead of the svg and any idea how to implement it?

The SVG format would be something like this:
<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path></svg>

If it's the png format then it would be an <img> tag:
https://www.w3schools.com/tags/tag_img.asp

I tried with the png, but it still returns a blank space 🙁

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<img><img src="menu-symbol-mobile-small-2.png></img>';
    }
    return $output;
}, 10, 2 );

Try this:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<img src="https://URL-TO-THE-IMAGE">';
    }
    return $output;
}, 10, 2 );

Thanks, Leo!!

Just a quick question - this is how it looks now https://prnt.sc/26ir1rm
Looks way oversize for mobile. I guess resizing it wouldn't be ideal since all displays will show it differently. Is there a way to scale it automatically?

Hi Georgi,

You can try setting an @media rule value for the newly added img icon.

@media (max-width:768px){
    span.gp-icon.icon-menu-bars > * {
        width: 50px;
    }
}

@media (max-width:600px){
    span.gp-icon.icon-menu-bars > * {
        width: 40px;
    }
}

@media (max-width:480px){
    span.gp-icon.icon-menu-bars > * {
        width: 30px;
    }
}

While you can try setting a percentage width value relative to parent container's size, the effects would be minimal because the change in width size for the button container is minimal as well.

Thank you, Elvin!

This worked!

However the menu icon doesn't to be aligned with the shopping bag; it's a bit higher. https://prnt.sc/26j2eny

Is there a way to be on the same level as the shopping bag?

Also, how to add a little padding to the shopping bag?

Currently I use this code for the menu icon I found in the forums but don't know how to be done for the shopping bag:

#mobile-header.has-branding .menu-toggle {
    order: -5;
    padding-left: 10px;
    margin-right:auto; /* Add this property */
}

Thanks!

Hi Georgi,

You may try modifying that current code with this to align the “menu icon” to the center:

#mobile-header.has-branding .menu-toggle {
	order: -5;
	padding-left: 0;
	margin-right: auto;
	display: flex;
 	align-items: center;
}

Then to align your logo along the center of the y-axis as well, a modification you can make to its current CSS code is to make the position attribute of the div holding the logo to static from absolute:

.site-logo.mobile-header-logo {
	position: static;
	transform: translateX(-50%);
	margin-left: auto;
}

With this, you may remove the “top” and “left” rules.

Hope this helps!

Hi Fernando,

Thank you! The first code you sent aligned the menu with the basket! 🙂

I think the second code you sent me is not needed because it moves the logo to the left: https://prnt.sc/26jln9b

I use this code (again found in the forums) and it centers it:

.site-logo.mobile-header-logo  {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-left: auto;
}

Is it okay to use it?

Also, another thing to ask - how to add space between the menu and the end of the screen, to move it more to the right? The same thing to do with the cart too, to move the cart to the left and create space. They look too pressed into the sides.

Hi there,

yes you can use that CSS.
To put some space around add this CSS:

@media (max-width: 768px) {
    .main-navigation.has-branding .inside-navigation.grid-container {
        padding: 20px 0;
    }
}

Hello David,

This CSS actually pushes both the menu and cart icon down: https://prnt.sc/26jq0tw