Collapsible navigation is standard practice on websites, but what if you want to include navigation in your emails? Listing a bunch of links above your email content on mobile is not going to be ideal, so if you think your emails need to include navigation, here’s a solution!
This was built out using several methods created by Email on Acid, so thanks to them for their contribution to better email!
To start, we’ll just create our menu as it will appear in on desktop versions:
<div id="navigation-container">
<table class="navigation" width="100%" cellpadding="0" border="0">
<tr>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/">Home</a></td>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/features/">Features</a></td>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/blog/">Resources</a></td>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/support/">Support</a></td>
</tr>
</table>
</div>
Next, we’re going to add a hidden checkbox that, when checked, will expand the navigation. The conditional code must be included as well to hide in Outlook.
<!--[if !mso 9]><!--><input id="nav-checkbox" style="display:none !important;" type="checkbox"/><!--<![endif]-->
Now we can add in our hamburger icon for mobile that functions as a label for the checkbox we just added. When the user clicks on it, it will expand/collapse the navigation. Since some inboxes will strip out the checkbox, we’ll add in this method by FreshInbox, which relies instead on a hover state. This also requires conditional code to hide it from Outlook:
<!--[if !mso 9]><!-->
<div class="nav-under" style="display:none;overflow:hidden;max-height:0px;text-align:center;">
<div class="nav-toggle-container"><label for="nav-checkbox"><img border="0" class="nav-toggle" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/hamburger2.png" width="25"/> </label></div>
<div class="header-logo-container"><label for="nav-checkbox"><img border="0" class="header-logo" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/logos/emfluence-emp-logo-black.png" width="180"/> </label></div>
</div>
<div class="nav-over" style="display:none;overflow:hidden;max-height:0px;text-align:center;position:absolute;top:0px;width:100%;opacity:0;color: #ffffff;">
<div class="nav-toggle-container"><label for="nav-checkbox"><img border="0" class="nav-toggle" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/hamburger2.png" width="25"/> </label></div>
<div class="header-logo-container"><label for="nav-checkbox"><img border="0" class="header-logo" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/logos/emfluence-emp-logo-black.png" width="180"/> </label></div>
</div>
<!--<![endif]-->
This all gets wrapped in a single div to allow for CSS control:
<div id="nav-expand">
<!--[if !mso 9]><!-->
<div class="nav-under" style="display:none;overflow:hidden;max-height:0px;text-align:center;">
<div class="nav-toggle-container"><label for="nav-checkbox"><img border="0" class="nav-toggle" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/hamburger2.png" width="25"/> </label></div>
<div class="header-logo-container"><label for="nav-checkbox"><img border="0" class="header-logo" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/logos/emfluence-emp-logo-black.png" width="180"/> </label></div>
</div>
<div class="nav-over" style="display:none;overflow:hidden;max-height:0px;text-align:center;position:absolute;top:0px;width:100%;opacity:0;color: #ffffff;">
<div class="nav-toggle-container"><label for="nav-checkbox"><img border="0" class="nav-toggle" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/hamburger2.png" width="25"/> </label></div>
<div class="header-logo-container"><label for="nav-checkbox"><img border="0" class="header-logo" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/logos/emfluence-emp-logo-black.png" width="180"/> </label></div>
</div>
<!--<![endif]-->
<div id="navigation-container">
<table border="0" cellpadding="0" cellspacing="0" class="email-nav" style="width: 90%;">
<tbody>
<tr>
<td align="center" style="text-align: center; width: 100%;" valign="middle">
<table class="navigation" width="100%" cellpadding="0" border="0">
<tr>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/">Home</a></td>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/features/">Features</a></td>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/blog/">Resources</a></td>
<td width="25%" align="center"><a style="color:#2d8498; font-size: 15px; font-weight:bold;" href="https://emarketingplatform.com/support/">Support</a></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if !mso 9]><!--><input id="nav-checkbox" style="display:none !important;" type="checkbox"/><!--<![endif]-->
</div>
</div>
Now to get started with making it all function, we add the below CSS:
input {display:none;}
@media (max-width:768px) {
#nav-expand {
position:relative;
max-width:100%;
text-align:center;
}
#navigation-container {
position:relative;
overflow:hidden;
}
#nav-expand table {
margin-top:-500px;
-ms-transition: margin-top .5s ease-in-out;
-webkit-transition: margin-top .5s ease-in-out;
}
#nav-checkbox:checked + table {
margin-top: 0%;
}
}
This CSS will hide the checkbox on desktop and hide the navigation when collapsed. When the checkbox gets checked, the margin gets changed from -500px to 0, which displays the hidden nav.
Then, to make the fallback hover nav work, we include this CSS:
.nav-over, .nav-under {
display:block !important;
max-height:none !important;
padding-top:3px;
padding-bottom:3px;
}
Some additional styles are needed for certain inboxes:
#nav-expand > .nav-over:hover + div table{
margin-top:0% !important;
}
#nav-expand > .nav-over:hover{
visibility:hidden;
}
Unfortunately, not all inboxes want to play along. The Gmail app for iPhone and Android does not allow this functionality, so we must remove the navigation altogether in mobile gmail apps. The app can be targeted with this CSS:
/**remove functionality for gmail app**/
u + .body .desktop-logo {
display:block !important;
}
u + .body #nav-expand {
display:none !important;
}
Finally, we found in testing that the Outlook app for iPhone had issues with our functionality, so we have to include the following CSS to disable the hamburger menu and display a simple navigation only for the Outlook App:
body[data-outlook-cycle] .nav-over {
display: none !important;
}
body[data-outlook-cycle] .nav-toggle-container {
display: none !important;
}
body[data-outlook-cycle] .header-logo-container {
width: 100% !important;
}
body[data-outlook-cycle] .header-logo-container .header-logo {
width: 100% !important;
padding-right: 0 !important;
width: 150px !important;
padding-top: 0 !important;
}
body[data-outlook-cycle] .email-nav td {
width: 25% !important;
display: table-cell !important;
border-bottom: 0px none !important;
text-align: center !important;
padding-bottom: 11px !important;
line-height: 12px !important;
}
body[data-outlook-cycle] .email-nav td.hide-me {
display: none !important;
}
body[data-outlook-cycle] .email-nav img {
display: block !important;
float: none !important;
margin: 0 auto !important;
}
There’s a lot happening behind the scenes to make a simple collapsible nav work, but once you have it set up, it’s something you can reuse for all your emails!
