Reply To: Mobile Menu on iPad

#1312
Livemeshlivemesh
Keymaster

You will have to move the mobile menu related code to the media query for higher resolution. Currently the mobile menu gets activated when the browser window size reaches 767px. You will need the following changes in Custom CSS tab in theme options panel to change that behavior (or put it into custom/custom.css file) –

@media only screen and (max-width: 1024px) {
    #primary-menu { display: none; }
    #mobile-menu { display: block; position: relative; margin: 0; background: #4E5052; }
    #mobile-menu > ul { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #5E5F61; margin: 0 auto; max-width: 380px; }
    #mobile-menu ul { display: none; list-style: none; text-transform: none; }
    #mobile-menu ul li { border-top: 1px solid #516063; border-bottom: 1px solid #4C3536; margin: 0; }
    #mobile-menu ul li:first-child { border-top: none; }
    #mobile-menu ul li:last-child { border-bottom: none; }
    #mobile-menu ul li a { color: #ccc; display: block; padding: 10px 5px; }
    #mobile-menu ul li a:hover { color: #eee; }
    #mobile-menu-toggle { display: block; position: absolute; top: 30px; right: 0; height: 22px; width: 24px; padding: 5px; border: 2px solid #bbb; }
}

You can also modify the responsive.css file but can run into issues during updates.