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"> </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> </span> <a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank" >Link 2</a> <span> </span> <a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank">Link 3</a> <span> </span> <a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank" >Link 4</a> <span> </span> <a href="http://example.com" style="color:#512DA8;text-decoration:none" target="_blank">Link 5</a> <span> </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"> </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:
- Go to the Design step of the Mailchimp campaign builder.
- Add a Code content block to your campaign (where you want the menu to appear).
- Add the HTML as described previously to the code block and save.
Of course you’ll need to amend the HTML for your needs.
Thanks for this – just a heads up – your min in the code should be a max, or it has the opposite effect of showing on a mobile but not desk top. Confused me for a bit!
Same here. It is showing on mobile but not on desktop.
Looking for code to enable responsive nav menu, i.e. it stacks the menu vertically for mobiles, leaves as horizontal for desktop?
This is great! How do you change the headings to interactive logos/images as opposed to text?
Libby, where it is written in the HTML code, for example, “Link 3” you’ll change this to be the HTML for your image e.g.
This is good to know, thank you! How do you get it so it displays on mobile and desktop?! SOrry, I am new to coding!
Hi Anna, the navigation will display on all devices.
Gary, Thanks for doing this! I changed the max to min and it shows on the desktop, but now it won’t show on the mobile. Got any ideas?
Hi Jed, unfortunately it will take time to look into the issue. Let me know and we can setup a consulting session if you’re interested.
To get the menu to show on both desktop and mobile devices, change the min at the beginning to max and change the display from none to inline