Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #28570

    How do we get Responsive Header Main Menu on a horizontal tablet ( IE – that is in a landscape position ) ?

    We have about ten links in our Main header.

    So when an iPad is horizontal we no longer get the “Responsive Header Main Menu” button.

    Which then the ten links bleed right into the logo.

    How do we adjust this for a horizontal iPad ( IE – tablets that are in a landscape position ) ?

    Thanks in advance.

    #137973

    I am having the same issue. Any help would be appreciated. Thanks!

    #137974

    Hi All,

    You can follow these changes to alter the width at which the menu switches: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

    The pixel width for tablets can be found here: http://screensiz.es/tablet

    Regards,

    Devin

    #137975

    Did just as you asked and did not get any results.

    Can you please submit a screen shot for the “Quick CSS” and the “avia.js” file so that we may see the exact pixel dimensions to use.

    We are using an iPad 2.

    Thanks in advance.

    #137976

    1) If we hold the iPad 2 in “landscape” position

    AND…

    … set the pixels at 1025 within both the “Quick CSS” and the “avia.js” file

    The Menu Links disappear but there is no Menu Button

    ===============================

    2) If we hold the iPad 2 in “landscape” position

    AND…

    … set the pixels at 1023 or less within both the “Quick CSS” and the “avia.js” file

    The Menu Links appear.

    ==============================

    Can you please submit a screenshot for both the “Quick CSS” and the “avia.js” file so that we may see the exact pixel dimensions to use.

    We are using an iPad 2.

    Thanks in advance.

    #137977

    OK.

    We got the Responsive menu to show up by changing LINES 74 – 93 of the “avia.js” file to :

    ===================================================================

    //


    // 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 = 1025; //This was 767 but changed it to 1025 so that tablets in landscape position would see responsive Menu Button

    if(first_level_items > 8 && !bottom_menu)

    {

    switchWidth = 1025; //This was 989 but changed it to 1025 so that tablets in landscape position would see responsive Menu Button

    header.addClass(‘mobile_menu_tablet’);

    }

    #137978

    If we hold the iPad 2 in “landscape” position ….

    The “Responsive Menu Button” now appears

    BUT….

    1) When you click on it, only the “Close” button appears.

    2) The menu only appears by turning it FROM landscape to vertical

    3) And the menu will not scroll all the way down so that we can see all the links

    ====================

    The good news is that it works fine if we are ORIGINALLY holding the iPad 2 vertical.

    Look forward to your assist.

    #137979

    Please let s know if we have to adjust anything in the “layout.css” file starting around LINE 2705 .

    If yes, please let s know exactly what needs to be pasted or changed there.

    #137980

    OK.

    Think we got it fixed.

    Went to the “layout.css” file at LINES 2952 – 2954 and made the following change to the max-width

    @media only screen and (max-width: 1025px) { /* This was 989px . It was changed o the Responsive Menu would show on TABLETS held in landscape position */

    #mobile-advanced{display:block;}

    }

    ===============================

    Please let us know if this is the correct way. Or whether it will cause conflicts.

    If this is correct, will you please consider making the changes in your next update ?

    #137981

    In other words, will this cause laptops and desktops that have resolutions set at 1024px wide to see the “Responsive Menu” ?

    If yes, is there a workaround to make it JUST for tablets ?

    #137982

    We brought down the max-width to 1024px

    =======================================

    @media only screen and (max-width: 1024px) { /* This was 989px . It was changed o the Responsive Menu would show on TABLETS held in landscape position */

    #mobile-advanced{display:block;}

    }

    =======================================

    1) Will this cause laptops and desktops that have resolutions set at 1024px wide to see the “Responsive Menu” ?

    2) If yes, is there a workaround to make it JUST for tablets ?

    #137983

    This will cause any device that has less than 2024 to display the responsive menu.

    This is the complication that we face when creating websites and trying to make them usable for everyone on all devices (responsive). The best solution with the fixed header and menus is to make the menu simplistic and the sub menus have the multi tiered depth.

    If that isn’t an option, the above: change the width at which the mobile menu shows up, is the second best option.

    Regards,

    Devin

    #137984

    Thanks for the reply and support.

    Plan to purchase many more of this theme.

    Enjoy your weekend .

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

The topic ‘Need the Responsive Header Main Menu for horizontal tablets’ is closed to new replies.