Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #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.


    This reply has been marked as private.


    Please refer to this post for mobile menu
    It will enable you to change the width to switch to mobile menu.
    Can you post a screenshot showing sidebar issue you are having?



    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;

    Here is a link to a screenshot of the right nav not collapsing on ipad:




    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.



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

    See screenshot:



    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.



    Fixed! Thank you so much. :)


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.