[Resolved] Changing Slideout Navigation Icon

Home Forums Support [Resolved] Changing Slideout Navigation Icon

Home Forums Support Changing Slideout Navigation Icon

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #616229
    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 πŸ™‚

    GP Premium 1.6.2
    #616287
    Oliver

    Hi, I have the same question πŸ™‚

    #616354
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #616369
    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 ;
    }
    #616520
    Leo
    Staff
    Customer Support

    Thanks for sharing.

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

    #620354
    Francisca

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

    #620427
    Leo
    Staff
    Customer Support

    Awesome. Thanks Oliver!

    #944268
    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}
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.