Hi all,

I am trying to do the hamburger menu in an email but getting a problem with the input field, when it's added it hides the header/menu etc below but the banner below is fine?


                <input id="mobile-checkbox" type="checkbox" style="">

                <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" style="border-collapse: collapse; border-spacing: 0; margin: auto; min-width: 600px;" width="600">
                    <tr>
                        <td>
                            <label for="mobile-checkbox" id="mobile-label" style="display: none;">
                                <b></b>
                                <b></b>
                                <b></b>
                            </label>
                            <!--[if mso]>
                        </td><td><![endif]-->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color: #F0F1EA" bgcolor="#F0F1EA">
                                <tbody>
                                    <tr>
                                        <td style="padding:10px;text-align:center;"><a href="http://www.thrive-creative.co.uk"><img src="http://thrivetest.website/test-emails/thrive-newsletter/16-03/images/logo.jpg" alt="logo" border="0" class="fitSize"></a>
                                        </td>                                                               
                                    </tr>
                                    <tr>
                                        <td style="padding:20px 0 0px 0;font-family:'Lobster-Regular', 'Arial Narrow', Arial, sans-serif;font-size:24px;font-weight:normal;color:#a3be00;text-align:center;">
                                            INTEGRATED BRAND &amp; DIGITAL COMMUNICATION 
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="menu">
                                <tr>
                                    <td class="remove-bottom-padding" style="padding:20px 0;">
                                        <div id="menu-wrapper"><!--[if mso]>
                                            <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td><![endif]-->
                                                        <table align="left" border="0" cellpadding="10" cellspacing="0" class="menu" style="border-collapse: collapse; border-spacing: 0;">
                                                            <tr>
                                                                <td style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1; padding: 10px; text-transform: normal;" nowrap>
                                                                    <a href="http://www.thrive-creative.co.uk/what-we-do/" class="menu-item" style="color: #000000; line-height: 1; text-decoration: none;font-weight:bold;text-transform:uppercase;">What we do</a>
                                                                </td>
                                                            </tr>
                                                        </table><!--[if mso]>
                                                    </td><td><![endif]-->
                                                        <table align="left" border="0" cellpadding="10" cellspacing="0" class="menu" style="border-collapse: collapse; border-spacing: 0;">
                                                            <tr>
                                                                <td style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1; padding: 10px; text-transform: normal;" nowrap>
                                                                    <a href="http://www.thrive-creative.co.uk/work/" class="menu-item" style="color: #000000; line-height: 1; text-decoration: none;font-weight:bold;text-transform:uppercase;">Work</a>
                                                                </td>
                                                            </tr>
                                                        </table><!--[if mso]>
                                                    </td><td><![endif]-->
                                                        <table align="left" border="0" cellpadding="10" cellspacing="0" class="menu" style="border-collapse: collapse; border-spacing: 0;">
                                                            <tr>
                                                                <td style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1; padding: 10px; text-transform: normal;" nowrap>
                                                                    <a href="http://www.thrive-creative.co.uk/get-in-touch/" class="menu-item" style="color: #000000; line-height: 1; text-decoration: none;font-weight:bold;text-transform:uppercase;">Contact us</a>
                                                                </td>
                                                            </tr>
                                                        </table><!--[if mso]>
                                                    </td>
                                                </tr>
                                            </table><![endif]-->
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

Can anyone help workout a way around it, it only happens on Office 365 and Outlook.com