Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 13, 2018 at 2:46 pm #926100
    kjie

    Dear sir/madam,

    On http://wasmorg.com I have a menu that appears ‘broken’ on some iPads. Is it possible to set the mobile to be active on ALL iPads, phones, etc., except for desktops? So I want all iPads and phones to have the mobile menu and all desktop to have the text menu.

    Let me know,

    Ranco

    March 13, 2018 at 6:08 pm #926177
    Mike

    Hey kjie,
    I see that you have adjusted the brake point for you mobile menu to 1024 which should work according to this information But if you are experiencing an issue on some iPads then perhaps try increasing the width a little, such as 1100px.
    Another option is to add the -webkit rule that is a little further down the page, such as:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.av-main-nav > li.menu-item-avia-special {
    display: block !important; 
}
.av-main-nav > li.menu-item {
    display: none !important; 
}
}

    or try the and (-webkit-min-device-pixel-ratio: 1) depending on the iPad that is having the issue.
    Another source I found has the iPad Pro 12.9″ max width at 1366px
    Hope this helps.

    Best regards,
    Mike

    March 15, 2018 at 4:41 pm #927473
    kjie

    Dear Mike,

    I have tried your css, but I couldn’t get it to work. Could you please help me out? I have provided the credentials.
    Right now, the menu disappears on some desktop. It should be text on desktops and show a mobile menu on all phones and tablets.

    Thanks!

    March 15, 2018 at 8:08 pm #927632
    Vinay

    Hi,

    The code provided by Mike seems to work fine. The mobile menu kicks in at a higher resolution. You may not see the changes until the cached files are cleared in your browser.

    Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

    If you still have an issue please try the below code and feel free to adjust the max-width value for the @media query.

    /* Activate burger menu */
 @media only screen and (max-width: 1224px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

    Best regards,
    Vinay

    March 26, 2018 at 2:48 pm #933010
    kjie

    Hi Vinay,

    My client still has problems with the menu. He deleted his browser history.

    Chrome: Mobile version (should be text version)
    Internet Explorer: Mobile version (should be text version)
    Microsoft Edge: Text version (which is good)
    Safari: Text version (which is good)

    If he makes his screen a little bit smaller (to 95%), he does see the text menus. Can you please help me to straighten this out?

    Thanks!

    March 27, 2018 at 12:26 am #933255
    Vinay

    Hi,

    Please adjust the max-width value of the media query in the line ” @media only screen and (max-width: 1224px) ” sp the menu on the frontend will kick at the width you like. Please note the browser may not be calculating the max width exactly how we think but by changing the width value it should work.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.