Quantcast
Channel: Active questions tagged email - Stack Overflow
Viewing all articles
Browse latest Browse all 29904

Email HTML TopNav Menu in Table structure

$
0
0

I inherited this code for use in an email and would appreciate advice on how to fix. The code is a table that creates a topnav/menu with a logo followed by 1-3 "menu" links to take the user to a website.

CURRENT: A single table row with each element set apart by non-breaking spaces.

ISSUE: It is left aligned so the menu items float in the various responsive versions.

ASK: I think if the row is set as 4-5 columns it would allow the left cell to be "logo", an empty cell, and 3 cells for each of the nav items. It uses some additional code I think is targeting a fix needed for Outlook but I am unfamiliar with it and not sure if the proposed solution will break it.

<table width="100%" role="presentation" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td class="pc-sm-p-25-20 pc-xs-p-15-10" valign="middle" style="padding: 29px 30px; background-color: #ffffff; font-size: 0" bgcolor="#ffffff"><!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td valign="middle"><![endif]-->

                <div style="display: inline-block; vertical-align: middle;">
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td valign="top" style="padding: 10px;"><a style="text-decoration: none;" href="http://https://www.website.com"><img width="130" height="" style="max-width: 100%; height: auto; border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-size: 14px; color: #1B1B1B;" alt="" src="images/fpo-logo-1180x239.jpg"></a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!--[if (gte mso 9)|(IE)]></td><td valign="middle"><![endif]-->

                <div style="display: inline-block; vertical-align: middle;">
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td valign="top" style="padding: 10px; line-height: 18px; font-family: Helvetica, sans-serif; font-size: 14px;"><a style="text-decoration: none; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #454545" href="https://www.website.com/path1">Path 1</a> <span style="font-family: Helvetica, sans-serif; font-size: 20px;">&nbsp;&nbsp;</span> <a style="text-decoration: none; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #454545" href="https://www.website.com/ath2">Path 2</a> <span style="font-family: Helvetica, sans-serif; font-size: 20px;">&nbsp;&nbsp;</span> <a style="text-decoration: none; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #454545" href="https://www.website.com/path3">Path 3</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
        </tr>
    </tbody>
</table>

Viewing all articles
Browse latest Browse all 29904

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>