[Resolved] Changing Slideout Navigation Icon

[Francisca]

Hi. I know this is a bit weird, and I believe it hasn’t been addressed on the forum but… Is there a way to change the icon of the slideout menu? I know the hamburger menu icon is the way to go. However, I wanted to use the slideout menu for a language switcher, so I was thinking of using the fontawesome flag or globe instead of the burger.

Thanks 🙂

[Oliver]

Hi, I have the same question 🙂

[Leo]

Hi there,

So you want to replace the menu toggle on mobile with a language switcher so the menu won’t show up?

Any examples you can show me?

Let me know 🙂

[Oliver]

I have found a solution:

First, I followed this Instructions, but with my own fontawesome Icon: https://generatepress.com/forums/topic/slideout-menu/#post-162826

And then I added this CSS to remove the hamburger Icon:

.slideout-toggle {
    display: none !important;
}
.custom.slideout-toggle {display: inline-block !important}
.main-navigation .slideout-toggle a:before {
    content:none ;
}

[Leo]

Thanks for sharing.

@Francisca can you give it a shot and let me know if that works for you as well?

[Francisca]

Thanks, everyone. I tried it briefly on the site and it worked!

[Leo]

Awesome. Thanks Oliver!

[Morgan]

Thought I’d chime in for anyone looking to change the overlay icon.

The code Tom provided for .slideout-toggle icon customisation worked initially but with my many CSS changes it eventually broke.

The code Oliver above offered with inline-block (instead of block), works.
I’m using:

.slideout-toggle {display: none !important;}
.main-navigation .slideout-toggle a:before {content:none !important}
.custom.slideout-toggle {display: inline-block !important}

[Author]

Posts