Mobile Menu on iPad

[melvinneo]

Hi,

How do I force the mobile menu to appear on iPad portrait mode? Currently, it’s still the full menu. Thanks.

[livemesh]

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.

[melvinneo]

Theme options panel? I’m referring to your HTML site. Not the WordPress one. Thanks.

[livemesh]

Sorry – you can then place this code in custom/custom.css file. Thanks

[Author]

Posts