How to add a menu that only displays on mobile screen sizes?

Right now I have a decent menu formatted for desktop screens on my web app. However, on smaller screen sizes the menu really doesn't appear correctly. At this point I'm wondering if I can just add a hamburger menu like this --->

http://ift.tt/1wwrlNw

    <header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">Work</a></li>
      <li class="menu__item"><a href="" class="menu__link">About</a></li>
      <li class="menu__item">
        <a href="https://twitter.com/ettrics" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a>
      </li>
      <li class="menu__item">
        <a href="http://ift.tt/28XSqi3" target="_blank" class="menu__link menu__link--social">
          <i class="fa fa-dribbble"></i></a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1>
  <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2>
  <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p>
</main>

but only have it appear on mobile an tablet screen sizes. Essentially I'm asking is there a way to add this menu and hide it on desktop sized screens.