Change hamburger menu style

Hello !
If you go to my website : m52o.website , you notice that when you reduce the window size, a hamburger menu appears (with 3 bars). Could you please show me a way I could change the icon to a "profile icon" or any other icon ?
Good day,
Mwale

  • Rupok
    • Support Ninja

    Hi Mwale,

    You can do this by creating a MU Plugin. For creating a MU Plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    add_action( 'wp_footer', 'replace_menu_icon' );
    function replace_menu_icon() {
        ?>
        <script type="text/javascript">
          jQuery(document).ready(function() {
    		jQuery( ".navbar-toggle.collapsed.active .icon-bar.top-bar" ).replaceWith( "<i class='fa fa-user'></i>" );
    		jQuery(".navbar-toggle.collapsed.active .icon-bar.middle-bar").css("display", "none");
    		jQuery(".navbar-toggle.collapsed.active .icon-bar.bottom-bar").css("display", "none");
          });
        </script>
        <?php
    }

    For getting more idea on mu plugins, you can go through this article: http://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    I've checked this code in your console and it's working. So it should work. If it doesn't, please let us know. We will be glad to assist further.

    Have a nice day. Cheers!
    Rupok

  • Ash
    • WordPress Hacker

    Hello Mwale

    Would you please try the following code?

    #mobile-menu-trigger{
    background: url( /path/to/icon ) right center no-repeat !important;
    }
    .menu-open:before{
    display: none !important;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Rupok
    • Support Ninja

    Hi Mwale,

    I went to your site but it seems like the theme is changed. Can you please revert back to previous theme so I can test this again? I tested this code in console on your site and it was working. I'm really curious to know why this didn't work for you.

    Please let us know when you are done changing. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Mwale
    • The Crimson Coder

    Hey Rupok ,
    I just switched to the white theme and the code worked perfectly :smiley: ! (Sorry I cant provide screenshot- I dont know how on ny phone). However, I was just testing something on that theme, I am still using blue theme. The changes dont work on blue theme, if you can could you pleease provide alternative solution for blue theme ? Thanks
    Regards,
    Mwale

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.