• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Marketing Strategy Facilitators & Mailchimp Pro Partners

  • Home
  • Services
    • Mailchimp Live Public Classes
    • Mailchimp Corporate/Team Training
    • Mailchimp Consulting
    • Marketing Strategy & Planning
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • 5 day Mailchimp marketing boost
    • Map maker for email
    • Is Mailchimp down?
    • Marketing facts and stats.
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About
You are here: Home / Marketing / Add a navigation menu to Mailchimp campaigns

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.

Found this useful? Please share:

Filed Under: Marketing

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to create a lead-capture form with file download.

How to target your most engaged Mailchimp contacts.

Reader Interactions

Comments

  1. Jo Amos says

    October 7, 2017 at 6:11 pm

    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!

    Reply
    • Nora says

      January 9, 2018 at 5:56 am

      Same here. It is showing on mobile but not on desktop.

      Reply
  2. Sarah says

    November 20, 2017 at 10:24 pm

    Looking for code to enable responsive nav menu, i.e. it stacks the menu vertically for mobiles, leaves as horizontal for desktop?

    Reply
  3. Libby says

    March 9, 2020 at 10:26 am

    This is great! How do you change the headings to interactive logos/images as opposed to text?

    Reply
    • Gary says

      March 11, 2020 at 8:27 am

      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.

      Reply
  4. Anna says

    November 11, 2020 at 7:19 pm

    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!

    Reply
    • Gary says

      November 12, 2020 at 9:14 am

      Hi Anna, the navigation will display on all devices.

      Reply
  5. Jed says

    November 24, 2020 at 5:08 am

    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?

    Reply
    • Gary says

      November 24, 2020 at 8:24 am

      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.

      Reply
  6. Xaryhia PrettyAndProfitable says

    December 14, 2020 at 12:00 pm

    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

    Reply

Leave a Reply Cancel reply

Primary Sidebar

Free Mailchimp Tutorial

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer ratings

Mailchimp pro partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2021 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service