Custom Menu Icon

Hi Andy,

Give this a try:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
  if (!wp_is_mobile()){
	if ( 'menu-bars' === $icon ) {
	
$output = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>';

$classes = array(
'gp-icon',
'icon-' . $icon,
);

return sprintf(
'<span class="%1$s">%2$s</span>',
implode( ' ', $classes ),
$output
);
}
}
return $output;
}, 15, 2 );

For more info: https://developer.wordpress.org/reference/functions/wp_is_mobile/

Let me know :)

Thank you, I didn't realise Wordpress had that function! works great!

You are welcome :)

Hi,
After some time I've noticed a bit of a display issue with this setup. When you click the + icon on mobile view then click the x icon to close it again, it continues to display the x icon instead of reverting back to the plus icon.

Also on all the internal/sub-pages and posts on mobile view when you open the menu I have it so the header background changes to the same grey colour as the rest of the menu/overlay. However, when you close the menu it should revert back to the original header colour.
I think its because the .mobile-menu-open class is still in the html even when the menu has been closed.

Any assistance appreciated.

Seems this CSS in your child theme breaks the JS, messed up some of the classes:
https://www.screencast.com/t/zaSOj2ONe

.slideout-navigation button.slideout-exit {
    display: none;
}

A slideout menu should be closed by the slideout exit button.

Give this CSS a try:

@media (max-width: 768px) {
.toggled .icon-menu-bars svg:nth-child(2) {
    display: none;
}
nav#generate-slideout-menu {
    padding-top: 60px;
    margin-top: -60px;
    z-index: 999;
}

.site-logo.mobile-header-logo {
    z-index: 1000;
}

.slideout-navigation .slideout-exit {
    font-size: 15px !important;
}
.slideout-navigation button.slideout-exit {
    display:block;
    position: absolute !important;
    top: -60px !important;
}
}

Thank you, this fixes the icon but now the logo isn't visible when the mobile nav is open and also it shows the grey header even when the mobile nav is closed.

It looks normal to me:
https://www.screencast.com/t/WSeDJpOLQYV
https://www.screencast.com/t/WSeDJpOLQYV

Isn't this what you see?

It only happens on sub-pages not homepage, when you open the mobile nav the logo disappears, then when you close it the header stays grey.

You are using header element to merge the header on the other pages and the logo is added there.

I checked some of your pages, seems they are using the same logo, can you try remove the logo from the header element to see if that works on the merged pages?

Let me know :)

Hmmmm, none of the header elements actually have the logo setup on them, I think it may be a z-index issue.

Let's replace the CSS I provided previously by this:

@media (max-width: 768px) {
.toggled .icon-menu-bars svg:nth-child(2) {
    display: none;
}
.slideout-navigation button.slideout-exit {
    display:block;
    position: absolute !important;
    top: -60px !important;
    font-size: 15px !important;
}
nav#generate-slideout-menu {
    overflow: visible;
}
}

Still same issue with no logo visible when mobile menu open and now can't scroll down to reach form.

Yea, it's tricky...Seems there's no way to get around it.

Can you try adding a logo to the off canvas menu as well?

I've just tried that using a hook but it places the logo below the navbar area (lower than the menu toggle). More importantly though I need to be able to scroll down to the contact form on mobile in the off-canvas panel. It worked before but now I can't, can you help me fix that first?