[Resolved] Change the off canvas menu icon – pro user

[Sarah]

Can I change the off canvas icon ? I can see that I have this “Desktop Toggle Label” in customiser – but that doesn’t change anything?

I change the SVG icon of the main menu using this link

https://docs.generatepress.com/article/generate_svg_icon_element/

But not the off canvas menu?

[Ying]

Hi Sarah,

Try this solution, replace the SVG code with yours.
https://generatepress.com/forums/topic/custom-off-canvas-menu-icon/#post-2319852

[Sarah]

Hi Ying – thank you – I have tried that and I cannot see where anything has changed? I have cleared cache but its still showing burger bar top right? Am I missing something?

[Fernando]

Hi Sarah,

The Off Canvas Menu you’re using isn’t the one from GeneratePress. Are you using a plugin for that?

The code provided above only works for the GP Off Canvas Menu Toggle Icon. otherwise, you’ll need to reach out to the plugin support you’re using. Or, if you’re using custom code, you’ll need to alter it manually.

[Sarah]

Hi Fernando – sorry but I am only using GP – premium plugin – nothing else – well other than generateblocks pro too but that doesn’t link to menus anyways? The off canvas menu is part of the pro package maybe?

[Fernando]

No, it doesn’t seem to be part of GB.

The icon is from Font Awesome. Can you provide admin login credentials so we can take a closer look? I may be missing something.

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Sarah]

which part is the issue the icon or ? I used any Font Awesome SVG icon – just to try to get something to work – once I can see it changing I can then look at using the real icon – used code from post link above?
details attached

[Fernando]

I see. You’re currently hiding the actual Menu Toggle through this code:

.main-navigation .slideout-toggle:not(.custom-slideout-toggle) {
    display: none !important;
}

If you remove this, the GP menu toggle will appear.

The one you’re using now is created through custom HTML.

Would you like to reposition the GP menu toggle where your custom menu toggle is?

[Sarah]

you’ve lost me that code above is for the primary menu not the off canvas icon? I have hidden for now and I can see the font awesome icons but the off canvas icon still doesn’t change – and its the off canvas menu icon I need changing 🙂

[Ying]

that code above is for the primary menu not the off canvas icon

No, the CSS is to hide the GP off canvas menu toggle icon.

Currently, the default GP off canvas menu toggle icon has been changed, but you have the font awsome icon as the off canvas toggle label, so there’re 2 icons now, you’ll need to remove the label.
https://www.screencast.com/t/JocCYqpg5

[Sarah]

Hi Ying – sorry I seem to have myself in a muddle here – so where do I change the off canvas icon then ? AS I have that css something in functions file too – an area in customise to add Font Awesome icon – but none seem to change that large icon you highlighted?

[David]

Hi there,

so this Menu Icon:

https://www.screencast.com/t/ogcDSt7Y1O

Has been added using HTML in the Appearance > Widgets -> Header Widget.
This here is that HTML:

<a class="slideout-toggle custom-slideout-toggle" href="#"><i class="fa-solid fa-bars"></i></a>

Are you wanting to change that icon ?

[Sarah]

THANK YOU! and gosh what a numpty I am – I forgot that there was 2 parts to the code we looked at – please ignore me no wonder I couldn’t figure it out!!

[David]

Glad to be of help

[Author]

Posts