Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 9, 2013 at 5:43 pm #198098
    bencwitt

    My flyout menu is working just fine on mobile devices, but I would like the menu to flyout when viewed on the iPad (portrait only). Could you assist me in doing this.

    Thanks in advance!

    My website is: http://benwitt.com

    December 10, 2013 at 5:10 am #198404
    Ismael

    Hi Ben!

    Please edit js > avia.js, find this code on line 89:

    switchWidth = 767;

    Replace it with a higher screen width:

    switchWidth = 886;

    Remove browser cache then reload the page a few times.

    Cheers!
    Ismael

    December 10, 2013 at 4:47 pm #198585
    bencwitt

    I apologize in advance, but what is js? I searched the functions.php and header.php and could not find anything on line 89 matching your description above.

    I’m not entirely sure where to look as I searched a few other folders but could not find the line you are referring to.

    December 10, 2013 at 5:22 pm #198610
    Yigit

    Hi!

    Please go to wp-content\themes\enfold\js folder via FTP and open avia.js file and make changes in Ismael’s post.

    Best regards,
    Yigit

    December 13, 2013 at 4:44 pm #199966
    bencwitt

    So I was able to find the folder and made the changes and it is still not working. I tried making them directly from host (they have a file manager option) and when that didn’t work I downloaded the file, made the changes, and then uploaded the new file using Filezilla.

    Any other suggestions?

    December 13, 2013 at 4:44 pm #199967
    bencwitt

    I also made sure to clear my cache on all my devices multiple times to make sure that wasn’t the issue.

    December 14, 2013 at 12:12 pm #200197
    Dude

    Hi!

    Did you try to use another “switch width” px value? Obviously Ismael assumed that the width of the ipad display is 886px if you use it in portrait orientation mode. However I’m not sure if 886 is the right display width/height and it may vary from ipad to ipad because (or tablet to tablet) because the displays have different resolutions. You might want to play around with the value a bit (i.e. set it to 1024px or 800px and check which value works for you).

    Regards,
    Peter

    January 12, 2015 at 8:41 pm #378514
    AJDesignCo

    Hi folks, I think I have the same problem, but these instructions aren’t relevant anymore. I don’t see “switchWidth” in the avia.js file. What is the right value to adjust to cause the layout to switch from desktop to responsive?

    Thank you!

    January 13, 2015 at 6:46 pm #379003
    Elliott

    Hey!

    Try adding this to your custom CSS.

    @media only screen and (max-width: 959px) {
#advanced_menu_toggle { display: block !important; }
.main_menu { display: none !important; }
}

    And play around with the 959 value to change when the responsive menu shows up.

    Cheers!
    Elliott

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Flyout Menu – Responsive Screen Sizes (including iPad Portrait)’ is closed to new replies.