Footer Anchor
Navigation begins as a single row at the top of the layout. At a specified breakpoint, the entire nav drops from the top and moves down to a stacked layout below the main message. A menu or hamburger button is added at the top of the layout that anchors to the stacked menu.
<style>
.main_cta img { width: 100%; height: auto !important; }
/* Footer Anchor Navigation Pattern CSS */
@media only screen and (max-width: 500px) {
td[id="header"] {
padding-bottom: 10px;
}
td[class="toggle"] {
display: table-cell !important;
width: auto !important;
height: auto !important;
max-width: inherit !important;
max-height: inherit !important;
float: none !important;
overflow: auto !important;
font-size: 12px !important;
font-family: arial,sans-serif;
}
td[class="toggle"] a {
display: block;
padding: 10px 0;
}
tr[class="main_nav"] {
display: table-footer-group;
}
tr[class="main_nav"] td {
display: block;
width: 100%;
padding: 0 !important;
}
tr[class="main_nav"] a {
display: block;
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #999;
}
tr[class=main_cta] {
display: table-header-group;
}
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="header">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="logo" align="left"><a href="#"><img src="http://placehold.it/156x34&text=Logo" alt="" style="display: block; border: 0;" /></a></td>
<td align="right" class="toggle" style="display: none; width: 0; max-height: 0; max-width: 0; height: 0; overflow: hidden; float: left; font-size: 0;">
<a href="#mobile_nav">Menu</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="main_nav">
<td id="mobile_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
</td>
<td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
<a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="main_cta">
<td>
<img src="http://placehold.it/600x300&text=Main+CTA" alt="" style="display: block; border: 0;" />
</td>
</tr>
</table>
