Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #182541

    I’m experiencing the issue where the mobile menu is not is not displaying on ipad portrait. Also, the right sidebar is not collapsing, which is causing width issues. The responsive works correctly in browser at the same width, but not in an actual iPad. I have read through all the other posts and tried every combination of CSS snippets you have suggested, but none are working. This is the last issue that needs to be fixed before we can launch. Please help.

    I will post wp creds for you in a private reply.

    Thanks

    #182543
    This reply has been marked as private.
    #182593

    Hi!

    Please refer to this post for mobile menu http://www.kriesi.at/support/topic/collapsable-menu/#post-165144
    It will enable you to change the width to switch to mobile menu.
    Can you post a screenshot showing sidebar issue you are having?

    Cheers!
    Yigit

    #182639

    Hi Yigit,

    Still not having any luck after changing the “switchWidth” to 989 in the avia.js. It doesn’t seem to change it at all.

    Here’s what the code currently is:

    ` // ——————————————————————————————-
    // responsive menu function
    // ——————————————————————————————-

    function avia_responsive_menu()
    {
    var win = $(window), header = $(‘.responsive #header’);

    if(!header.length) return;

    var menu = header.find(‘.main_menu ul:eq(0)’),
    first_level_items = menu.find(‘>li’).length,
    bottom_menu = $(‘html’).is(‘.bottom_nav_header’),
    switchWidth = 989;

    if(first_level_items > 7 + header.find(‘#menu-item-search’).length && !bottom_menu)
    {
    switchWidth = 989;
    header.addClass(‘mobile_menu_tablet’);
    }
    `

    Here is a link to a screenshot of the right nav not collapsing on ipad: https://copy.com/MC3ARCe8dz0Fj3wj

    Thanks,
    Justin

    #183395

    Hey!

    A couple of extras but I’ll put the whole set of steps:

    Modify the js>avia.js file to the new width you want the menu to show:

    
    var menu                           = header.find('.main_menu ul:eq(0)'),
    first_level_items = menu.find('>li').length,
    bottom_menu           = $('html').is('.bottom_nav_header'),
    switchWidth           = 767;
    

    Then add this to your Quick CSS or custom.css:

    
    @media only screen and (max-width: 767px) {
    .responsive #header .main_menu ul {
    display: none;
    }
    .mobile_active #advanced_menu_toggle {
    display: block;
    }
    }
    

    Modify each of the 767 values to the new width you want the mobile button to show. The css will hide the menu and show the mobile.

    Regards,
    Devin

    #183461

    That fixed the nav, but the sidebar still isn’t collapsing correctly.

    See screenshot: http://d.pr/i/3rSI

    #183611

    Hey!

    Please use this on your custom.css or Quick CSS:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .container .nine.units {
    width: 100%;
    border: none;
    }
    
    #top #main .sidebar {
    display: none;
    }
    }

    Remove browser cache then reload the page.

    Regards,
    Ismael

    #183810

    Fixed! Thank you so much. :)

    Cheers,
    Justin

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Responsive Header and Sidebar on iPad Portrait (under 768px width)’ is closed to new replies.