Archived topic
Changing Slideout Navigation Icon
7 replies · Started by Francisca on July 5, 2018
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 :)
Hi, I have the same question :)
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 :)
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 ;
}Thanks for sharing.
@Francisca can you give it a shot and let me know if that works for you as well?
Thanks, everyone. I tried it briefly on the site and it worked!
Awesome. Thanks Oliver!
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}