Hamburger menu on mobile

  • Hi!

    I am using a customised version of Twenty Sixteen and happy with desktop display so far.

    However, on mobile, I am wondering if it is possible to replace the menu button with a hamburger menu?

    The page I need help with: [log in to see the link]

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

  • Hello, i will share with you a method to achieve that:

    Edit the file “header.php” (maybe use a child theme?)

    Line 50: <button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>

    Delete that line, replace with:

    <button id="menu-toggle" class="menu-toggle"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" style="width:22px" role="img" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></button>

    This method uses inline SVG graphics, no png images. let me know if it works for you.

    I’m not the same person who requested this help, but I had the same question and your suggestion/code worked GREAT for me. THANK YOU!
    (wildbluepixel.com)

    • This reply was modified 3 years, 12 months ago by susantau.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hamburger menu on mobile’ is closed to new replies.