Pine Hamburger Navigation Header Example
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<!-- Logo column -->
<td class="col pb-sm-2" width="200" style="padding: 0 10px;">
<img src="http://placehold.it/160x160?text=LOGO" class="align-sm-center" alt="Logo" width="80" style="border-radius: 50%; max-width: 80px; width: 100%;">
</td>
<!-- Navigation column -->
<td class="col" width="420" style="padding: 0 10px; vertical-align: middle;">
<!-- Hamburger Nav -->
<div>
<!--[if !mso 9]><!-->
<img class="toggle-trigger show-sm align-sm-center p-sm-mini" 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: 30px;">
<a href="http://example.com" style="color: #999999; text-decoration: none;">News</a>
</td>
<td class="nav-item" style="padding-right: 30px;">
<a href="http://example.com" style="color: #999999; text-decoration: none;">Services</a>
</td>
<td class="nav-item" style="padding-right: 30px;">
<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>