Aside menu on mobile closes on scroll - wordpress Gavick University

danideb

using wordpress Gavick University theme
the main menu on mobile becomes (as expected) an aside menu, with a toggle button to make it appear

on mobile, if I use Chrome browser, I scroll the menu till the end, then the menu blocks at the last menu voice, and only the underlying content goes on scrolling

the same action on browsers other than Chrome (tried Firefox and Opera) causes a problem
I open the aside menu with the toggle button, scroll down the menu, but as soon as the last menu voice appears, the aside menu closes itself, no way to keep it visible
in this way I can't use the last voice of the menu, that in my case is the login/logout option

I suspect this behaviour has something to do with the file wp-content>themes>University>js>gk.menu.js, where a section

// Android stock browser fix for the` aside menu

appears, but I'm not sure, and I don't know where to put hands to solve this

this happens on my effective site www.icdepisis.it and also on an almost clean installation of wordpress gavick University www.icdepisis.it/university, so again I think of a theme problem and not of my specific site

thanks for suggestions

Joshua-M

Hello,

I've checked your website and can't see the issue. The aside menu is scrolled to the bottom (all menu items are visible) and the main content is scrollable then..

Maybe it's not enough space on the bottom of the aside menu on some devices, try to add the following custom css code:

#gk-aside-menu > ul {
    padding-bottom: 80px;
}

Hope it helps..

Cheers
Joshua

danideb

thank you Joshua
it's a little help, but not the solution I'm looking for

the problem is that the aside menu on some mobile browser (I said Opera and Firefox) automatically closes when the bottom limit is reached

what I'd like it to do, is that when I scroll down until the bottom end of the aside menu, it doesn't close itself, but just stops scrolling remaining opened, as it happens using for example Chrome on Android

the solution you are suggesting increases a little bit the usability, but doesn't solve the question I'd like to

I hope I've explained clearly what I mean; if not, tell me and I'll try to do it better
thanks again

Joshua-M

I think I understand, but I'm not able to replicate the issue.. is it visible only on Firefox and Opera mobile browsers?
What Android version are you using?

Cheers
Joshua

danideb

Opera and Firefox mobile on Android Pie, Google Pixel 2 XL
the same on Android 7.1.1, Zenfone Laser
on Android 8, Zenfone 3 Deluxe
also tried on protected browser of Lastpass app, same thing

here are the link to:
chrome scrolling video: [https://drive.google.com/open?id=1CmgzB-YESFqW8Z_AEeb6j8CJyyzyvIu0]
firefox scrolling video: [https://drive.google.com/open?id=1EmBF5WZmaKPjRZYOLBwQZ-Lpr52eaySU]

videos have been recorded on my pixel 2 xl, but same behaviour on the other devices I wrote above
all the browsers I tried do the same as the firefox video, only chrome does not

I'd like the menu stop as it does on the first video; as you see in the second video, as soon as the scrolling on aside menu reaches the bottom, it closes

danideb

I'm trying now with firefox desktop (on a linux pc) and using the development tool
switching to mobile rendering (e.g. on Galaxy s7), the same happens as in real firefox on mobile, so the debugging tool in firefox shows the same behaviour
with that tool it seems to affect only android devices, and not for example iPhones or Nokia Lumia

Joshua-M

Hi,

I can see the issue now. I'll report it to our developers team.. Please be patient, I'll inform you as soon as I get the answer/solution of this problem.

Cheers
Joshua

danideb

Joshua-M
not worried about waiting, I'll be patient :-)
thank you so much again

saguaros

danideb

You can backup these 2 files:

[root]/wp-content/themes/University/css/wp.css
[root]/wp-content/themes/University/js/gk.menu.js

Then download attached file > Unzip and replace 2 files inside for above 2 files.

aside-menu.zip

6kB

danideb

saguaros
thanks! the solution works out of the box on the site I use for proofs icdepisis.it/university
if I do the substitution on my effective site icdepisis.it, the toggle button for the aside menu stops working
I did various modification on different theme files in past months, I believe it's due to a change I made, 'cause the solution works on the clean University installation
I'll investigate a little bit then I'll write it down here
at the moment, thanks, it's exactly what I wanted the menu to do

danideb

ok, here again
I tried to look for the solution, but I didn't find anything helpful
so I applied the patch with the 2 files you suggested, both in an almost clean University installation (+ some plugins) www.icdepisis.it/university and in my site www.icdepisis.it
as I said, the first works, while in the second one the toggle button for the aside menu doesn't work anymore

any suggestion? where or what do I have to look for? thanks

danideb

solution found
where the toggle button stopped working, the development tool console marked this error:
$ is not a function

I replaced all the $ with jQuery in the gk.menu.js file (the one saguaros attached above), and now it all works

so the recap is:
- by replacing the files suggested by saguaros in a clean University installation, the aside menu works as desired also on mobile browser other than Chrome: the discussion is solved
- in my site I had to further edit the gk.menu.js file, and I replaced all the $ functions with jQuery: this solved the problem also in my specific site
- if somebody has a suggestion for the reason why this substitution has been necessary only on my site, and not on a clean theme installation... I'll learn something helpful for the next time

thanks again to everybody!

saguaros

danideb
Great to hear that it works now!