Page 1 of 1

CSS menu not colapsing on iphone.

Posted: Sun May 10, 2020 3:28 pm
by lilandy
Eve all.

I have a odd problem but not sure if its a fixable one.

I have used a CSS menu on this site:


Works great except for the 320 break point I had to swap the menu out for a collapsible menu to get all the sections on the menu bar.
Now it works fine if I view in my browser but if I load the page on a iPhone the menu does not collapse again if I select and of the drop down options unless I click on the page somewhere.

Its not a total killer or anything it just looks odd having a open menu if you then scroll up or down!

Is there a way to auto collapse it after it has scrolled to the book mark?

Cheers.

Re: CSS menu not colapsing on iphone.

Posted: Sun May 10, 2020 3:44 pm
by Pablo
if I load the page on a iPhone the menu does not collapse again if I select and of the drop down options unless I click on the page somewhere.
This is normal behavior. Because the menu uses 'hover' functionality which is not available on touch screens. So, instead the browser will trigger the 'hover'-state on focus and the only way to 'unfocus' the element is by clicking somewhere else.

Note that there are many other menus that do work on mobile devices.
https://wysiwygwebbuilder.com/navigation.html

Re: CSS menu not colapsing on iphone.

Posted: Sun May 10, 2020 3:52 pm
by lilandy
Cheers Pablo,

I figured that would be the case but thought it best to ask :)