Mobile Menu on iPad

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1308
    Melvinneomelvinneo
    Member

    Hi,

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

    #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.

    #1314
    Melvinneomelvinneo
    Member

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

    #1315
    Livemeshlivemesh
    Keymaster

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Enigmatic Theme Support’ is closed to new topics and replies.