Support Forums for LiveMesh Themes & Plugins › Forums › Enigmatic Theme Support › Mobile Menu on iPad › Reply To: Mobile Menu on iPad
August 13, 2013 at 4:08 am
#1312
livemesh
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.