Title: Changing Hamburger menu
Last modified: March 19, 2022

---

# Changing Hamburger menu

 *  Resolved [Hans K](https://wordpress.org/support/users/hans-k/)
 * (@hans-k)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/)
 * Hello,
 * I could use some help with the hamburgr menu on mobile devices.
    The hamburger
   icon is not that common for some of the visitors of the website I am making. 
   I would like to change the hamburger menu to an icon that sais MENU or I would
   like to add the tekst MENU next to the hamburger icon. I am using the Sidney 
   theme.
 * Greetings,
    Hans
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fchanging-hamburger-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15478504)
 * Hi Hans,
 * Try these instructions:
 * 1. Install and activate the [TC Custom JavaScript](https://wordpress.org/plugins/tc-custom-javascript/)
   plugin.
    2. Go To **Appearance** > **Custom JavaScript**. 3. Paste [this jQuery](https://pastebin.com/raw/Wih7Pvd7)
   code into the provided box. Use your own SVG icon in **mySVGIcon** variable. 
   4. Update and clear any cache.
 *  Thread Starter [Hans K](https://wordpress.org/support/users/hans-k/)
 * (@hans-k)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15480545)
 * Kharis, thank you for the quick reply.
    I had seen this solution on the forum
   and had tried it before. But unfortunately it didn’t work. And now I can’t get
   it to work either. I must have done something wrong.
 * This is what I did in the Custom JavaScript Plugin:
 *     ```
       ;(function($) {
   
         'use strict'
   
         if( $('#masthead-mobile .menu-toggle .sydney-svg-icon').length ) {
   
           var mySVGIcon = '<svg enable-background="new 0 0 512 512" height="24" viewBox="0 0 512 512" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="256" cy="128" r="128"/><path d="m256 298.667c-105.99.118-191.882 86.01-192 192 0 11.782 9.551 21.333 21.333 21.333h341.333c11.782 0 21.333-9.551 21.333-21.333-.117-105.99-86.009-191.883-191.999-192z"/></svg>';
   
           $('#masthead-mobile .menu-toggle .sydney-svg-icon').html(https://www.wiershoeck.nl/cms/wp-content/uploads/2022/03/Menu-hamburger-icoon.png);
   
         }
   
       })(jQuery);
       ```
   
 * Could you please tell me what I did wrong?
 * Thanks,
    Hans
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15481856)
 * Hi Hans,
 * Thank you for getting back.
 * If you don’t want to use your own SVG icon, uninstall the plugin I suggested,
   and add this CSS code to **Appearance** > **Customize** > **Additional CSS** 
   from dashboard.
 *     ```
       #masthead-mobile .menu-toggle {
         background-image: url('https://www.wiershoeck.nl/cms/wp-content/uploads/2022/03/Menu-hamburger-icoon.png');
         background-repeat: no-repeat;
         background-position: center center;
         background-size: contain;
       }
   
       #masthead-mobile .menu-toggle * { 
         opacity: 0;
       }
       ```
   
 *  Thread Starter [Hans K](https://wordpress.org/support/users/hans-k/)
 * (@hans-k)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15482824)
 * Hi Kharis,
 * I uploaded the wrong file the first time. The file I want to use instead of the
   hamburger menu is: [https://www.wiershoeck.nl/cms/wp-content/uploads/2022/03/Menu.gif](https://www.wiershoeck.nl/cms/wp-content/uploads/2022/03/Menu.gif)
   
   I know how to get it there now, using the CSS code you suggested. It works, but
   it is too small and I can’t seem to get it much bigger. If I change the background
   image size to “cover” or to a percentage, then it just shows one letter in stead
   of Menu
 * Could you please help me one last time?
 * Hans
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15485881)
 * Hi Hans,
 * Try this CSS code to enlarge your button.
 *     ```
       #masthead-mobile .menu-toggle {
         width: 40px;
         height: 40px;    
       }
       ```
   
 * Hope that helps.
 *  Thread Starter [Hans K](https://wordpress.org/support/users/hans-k/)
 * (@hans-k)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15486250)
 * Hi Kharis,
 * It works, just like I wanted to!
    Thank you very very much. You’re a great help
   on this forum!! And you sure helped me!
 * All the best,
    Hans

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Changing Hamburger menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/sydney/2.67/screenshot.png)
 * Sydney
 * [Support Threads](https://wordpress.org/support/theme/sydney/)
 * [Active Topics](https://wordpress.org/support/theme/sydney/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/sydney/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/sydney/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Hans K](https://wordpress.org/support/users/hans-k/)
 * Last activity: [4 years, 1 month ago](https://wordpress.org/support/topic/changing-hamburger-menu/#post-15486250)
 * Status: resolved