Acorn Hamburger Navigation Example Header

acorn-nav-hamburger-example-header.html

<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
  <td style="padding: 0 24px;">
    <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td class="col pb-sm-16" width="122" style="padding: 0 8px;">
          <img src="http://placehold.it/122x122?text=LOGO" class="align-sm-center" alt="Logo" width="61" style="border-radius: 50%; max-width: 61px; width: 100%;">
        </td>
        <td class="col" width="398" style="padding: 0 8px; vertical-align: middle;">
          <div>
            <!--[if !mso 9]><!-->
            <img class="toggle-trigger show-sm align-sm-center p-sm-8" src="https://i.imgur.com/RIRjWm6.png" width="20" aria-hidden="true" style="display: none; max-height: 0; max-width: 20px; width: 100%;">
            <!--<![endif]-->
            <div class="toggle-content">
              <table align="right" class="nav nav-sm-vertical align-sm-center text-sm-center" cellpadding="0" cellspacing="0" role="presentation">
                <tr>
                  <td class="nav-item" style="padding-right: 24px;">
                    <a href="http://example.com" style="color: #999999; text-decoration: none;">News</a>
                  </td>
                  <td class="nav-item" style="padding-right: 24px;">
                    <a href="http://example.com" style="color: #999999; text-decoration: none;">Services</a>
                  </td>
                  <td class="nav-item" style="padding-right: 24px;">
                    <a href="http://example.com" style="color: #999999; text-decoration: none;">Work</a>
                  </td>
                  <td class="nav-item">
                    <a href="http://example.com" style="color: #999999; text-decoration: none;">Store</a>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>