Hello All,

I need your help!

I have 2 navigation areas coded in this email: a navigation at the top (located below the header image) that shows on Desktop, and a navigation below (hidden on desktop but shown on mobile- you can scale your browser window to see it appear).

Following this discussion, I was able to properly hide the bottom navigation across the board on Outlook, Gmail, and Yahoo. But now the problem is getting the mobile navigation to expand 100% width like it did before I added inline CSS styles.

Here is my latest and greatest litmus test

Here is the navigation code i'm using for mobile:


<style type="text/css">
body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    background-color: #E5E5E5;
}
 @media screen and (max-width: 564px) {
table[class="navBot"] {
    display:block !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important
}
td[class="navBot"] {
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important;
}
td[class="navBotTD1"] {
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important;
    padding-top:0px !important;
    padding-bottom:20px !important;
    padding-left:20px !important;
    padding-right:20px !important;
}
td[class="navBotTD2"] {
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important;
    padding-left:16px !important;
    padding-right:16px !important;
}
a[class="navBot"] {
    font-size:16px !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important
}
}
</style>
</head>
<body style="padding:0; margin:0; -webkit-text-size-adjust:none;-ms-text-size-adjust:100%; background-color:#E5E5E5;" bgcolor="#E5E5E5">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none" class="navBot">
    <tr>
      <td width="100%" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; font-size:0; max-height:0; mso-hide: all" bgcolor="#E5E5E5" class="navBot">

      <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none" class="navBot">
                      <tr>
                        <td width="100%" align="center" style="padding-bottom:0px; padding-top:0px; padding-left:0px; padding-right:0px; display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; font-size:0; max-height:0; mso-hide: all" class="navBotTD1">


                        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none" class="navBot">
                            <tr>
                              <td align="center" bgcolor="#00274c" width="100%" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; font-size:0; max-height:0; mso-hide: all" class="navBotTD2"><a href="http://pages.litmus.com/e/31032/source-Pardot-utm-medium-email/r1n6q/102258563" target="_blank" style="font-size:0; font-family: Proxima Nova, 'proxima_nova_rgregular',Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; max-height:0; mso-hide: all" class="navBot"><!--[if gte mso 9]>&nbsp;<![endif]-->Switchgear<!--[if gte mso 9]>&nbsp;<![endif]--></a></td>
                            </tr>
                          </table>


                          </td>
                      </tr>
                    </table>

        </td>
    </tr>
  </table>

Any direction or help would be greatly appreciated. Thank you!