Changing Hamburger menu

  • Resolved Hans K

    (@hans-k)


    4 years, 1 month ago

    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 to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Kharis Sulistiyono

    (@kharisblank)

    4 years, 1 month ago

    Hi Hans,

    Try these instructions:

    1. Install and activate the TC Custom JavaScript plugin.
    2. Go To Appearance > Custom JavaScript.
    3. Paste this jQuery code into the provided box. Use your own SVG icon in mySVGIcon variable.
    4. Update and clear any cache.

    Thread Starter Hans K

    (@hans-k)

    4 years, 1 month ago

    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

    (@kharisblank)

    4 years, 1 month ago

    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

    (@hans-k)

    4 years, 1 month ago

    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
    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

    (@kharisblank)

    4 years, 1 month ago

    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

    (@hans-k)

    4 years, 1 month ago

    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.