Add a navigation menu to Mailchimp campaigns

Occasionally I get asked by Mailchimp training attendees how to add a horizontal menu to email campaigns. Many people like to send an email message with a navigation bar similar to those on their website.

Here is one way to add a menu to your Mailchimp campaign. You’ll need some HTML skills as there is not a menu content block in Mailchimp.

Use HTML to create a menu in a Mailchimp campaign

An email campaign is essentially a table or multiple tables. Knowing this we can therefore create a menu using a single row table with multiple columns; a column for each required menu item (hyperlink).

With HTML compatibility limitations in various email readers we are restricted as to styling. These restrictions are often perfectly acceptable but we need to keep in mind that we can’t use more advanced CSS styling attributes such as animate nor transform.

In addition we need to be aware of how table styling will (or won’t) display on small screen devices (i.e. responsive design). To simplify things I’ve added a media query in the HTML per the instructions below that won’t show the horizontal bar on small screen devices. A horizontal bar that doesn’t ‘fold’ when viewed on a small screen device makes the viewer scroll horizontally. Conversely, a menu that does fold often takes alot of screen space so I believe it more aesthetically appealing to not display the menu when the campaign is viewed on a small screen device.

Instructions to add a menu bar to a Mailchimp email campaign

In the following steps we’ll add a horizontal menu to a Mailchimp campaign using the following HTML:

<style type="text/css">
   @media screen and (min-width: 600px) {
    table .organicweb1 {display:none;}
}
</style>

<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
	<tbody><tr>
		<td style="padding:10px 0px 10px 0px" align="center" valign="top">
		<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
		<tbody><tr>
		<td align="left" width="35" valign="top">&nbsp;</td>
		<td style="border-top:1px solid #512DA8;border-bottom:1px solid #512DA8" align="center" width="590" valign="middle">
		<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
		<tbody><tr>
		<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
		<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center">
		<tbody><tr>
		<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
			<a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank" >Link 1</a>
			<span>&nbsp;&nbsp;</span>
			<a  href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank" >Link 2</a>
			<span>&nbsp;&nbsp;</span>
			<a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank">Link 3</a>
			<span>&nbsp;</span>
			<a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank" >Link 4</a>
			<span>&nbsp;&nbsp;</span>
			<a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank">Link 5</a>
			<span>&nbsp;&nbsp;</span>
			<a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank" >Link 6</a>
		</td>
		</tr>
		</tbody></table>
		</td>
		</tr>
		</tbody></table>
		</td>
		<td align="left" width="35" valign="top">&nbsp;</td>
		</tr>
		</tbody></table>
		</td>
	</tr>
</tbody></table>

In your Mailchimp campaign the navigation will look like this:

Here are the steps to add a horizontal menu to your Mailchimp campaign:

1. Go to the Design step of the Mailchimp campaign builder.
2. Add a Code content block to your campaign (where you want the menu to appear).
3. Add the HTML as described previously to the code block and save.

Of course you’ll need to amend the HTML for your needs.