Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #27836

    I have seen a lot of people with this problem and a lot of answers.

    I tried to see which was best for me but with so many I got confused. Could you let me know what would help me best?

    I just want the main menu not to show on ipad portrait mode and for it to show the load-out menu. At the moment it shows both with the text overlapping under the logo and under the load-out menu icon.

    #135529

    Hi,

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

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
    font-size: 12px;
    }
    }

    This will decrease the padding and the font size on iPad.

    Note: The menu overlap is still not fix on instance when you rotate the iPad from landscape to portrait view without refreshing the page.

    Regards,

    Ismael

    #135530

    Is there a way it would work on instance or is it just how it is and no work around?

    #135531

    Hi artistic24459,

    See if this post helps you: http://www.kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

    You can change the pixel width the theme switches to the mobile menu in both the javascript file and the new css and play with a number that works for you. So going up to say 980px would make it switch on just about all tablets and mobile devices but also some smaller laptops/netbooks.

    Regards,

    Devin

    #135532

    I will try. Do you have to change the javascript and the css to get it to work?

    This is what I’m trying to do:

    http://www.chriswardphotography.com/test-area/examples/example3.jpg

    Top is what I have, bottom version is what I’m trying to get.

    #135533

    Hi,

    On js > avia.js, increase the switchWidth value to 900:

    switchWidth = 900;

    Regards,

    Ismael

    #135534

    Do you mean change both to 900

    var menu = header.find('.main_menu ul:eq(0)'),

    first_level_items = menu.find('>li').length,

    bottom_menu = $('html').is('.bottom_nav_header'),

    switchWidth = 900;

    if(first_level_items > 8 && !bottom_menu)

    {

    switchWidth = 900;

    header.addClass('mobile_menu_tablet');

    }

    I have tried changed each one and when I make my browser it still shows the menu for too long. I need it to switch earlier so its just the slide out menu showing for the ipad portrait.

    Could you explain what each number is for (767, 989)?

    Sorry js is not my strong point :-(

    #135535

    Hey,

    Please replace this with code:

    bottom_menu = $('html').is('.bottom_nav_header'),
    switchWidth = 900;

    with:

    bottom_menu = $('html').is('.bottom_nav_header'),
    switchWidth = 1024;

    and this:

    if(first_level_items > 8 && !bottom_menu)
    {
    switchWidth = 900;
    header.addClass('mobile_menu_tablet');
    }

    with

    if(first_level_items > 7 && !bottom_menu)
    {
    switchWidth = 1100;
    header.addClass('mobile_menu_tablet');
    }

    Remove browser cache the reload the page.

    Don’t forget to add this css code on your Quick CSS:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
    font-size: 12px;
    }
    }

    Regards,

    Ismael

    #135536

    Hi Ismael,

    great, thanks for that!

    I have entered as mentioned above to http://www.musikzentrale.net, but here is what happens now:

    resizing the browser window below 1030px both now, the main menu AND the mobile menu, show up. when i go under 1013px in width, the logo vanishes, but still both menus are there, main and mobile. The main menu disappears when i go below ~780px

    here is my setting, anything wrong with that?

    IN AVIA.JS

    ‘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 = 1024;

    if(first_level_items > 8 && !bottom_menu)

    {

    switchWidth = 1100;

    header.addClass(‘mobile_menu_tablet’);

    }’

    AND IN CUSTOM CSS:

    ‘@media only screen and (max-width: 1100px) and (min-width: 1024px) {

    .responsive .main_menu ul:first-child > li > a {

    padding: 0 8px;

    font-size: 12px;

    }

    }’

    Thanks for your help

    Regards, SEbastian.

    PS: I am not really aware of what i am doing with those entries, it is more a guessing thing ;-)

    #135537

    I will give it a go tomorrow and let you know.

    Regards

    Chris

    #135538

    Sorry have not had time to update and try it out yet so please keep it open for another few days, sorry.

    #135539

    Hi,

    Please decrease the switchWidth value. I think the css code will work:

    @media only screen and (max-width: 1100px) and (min-width: 1024px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
    font-size: 12px;
    }
    }

    Like I said, there is still no fix on instances when you rotate the iPad from landscape to portrait view without refreshing the page.

    Regards,

    Ismael

    #135540

    I’m a little confused now. Do I still need to change the avia.js or just add the CSS above?

    I have not had time to try the code out before yet but I have tomorrow on the theme so will try it then.

    #135541

    Hey,

    Add the css then change the switchWidth value. Please experiment with it. It may depend on the number of menu items and the width of the screen.

    Regards,

    Ismael

    #135542

    Ok will try it out Monday

    #135543

    Hey,

    Alright. The rotation on ipad hasn’t been fix as far as I know. I hope it helps you somehow.

    Regards,

    Ismael

    #135544

    Ok thanks for that I’m working on the site now and will try to get it so it works for me.

    #135545

    Just make sure that you modify the css to hide the menu at the same pixel size that you show the mobile menu. Both code samples are here: http://www.kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

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

The topic ‘Menu overlap on ipad portrait’ is closed to new replies.