Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 30, 2013 at 7:47 pm #182541
    justinmw

    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

    October 30, 2013 at 7:51 pm #182543
    justinmw
    This reply has been marked as private.
    October 30, 2013 at 9:31 pm #182593
    Yigit

    Hi!

    Please refer to this post for mobile menu https://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

    October 30, 2013 at 10:50 pm #182639
    justinmw

    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

    November 1, 2013 at 3:20 pm #183395
    Devin

    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

    November 1, 2013 at 7:12 pm #183461
    justinmw

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

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

    November 2, 2013 at 4:54 am #183611
    Ismael

    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

    November 2, 2013 at 11:02 pm #183810
    justinmw

    Fixed! Thank you so much. :)

    Cheers,
    Justin

  • Author
    Posts
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.