On mobile, android, haven’t tried ios, when first loading the items under dropdown don’t show on first attemp, and sometimes on second as well, but at the next try the do show as they should.
Please take a look at this work in progress:
kamaleu dot com
On desktop it works fine, and haven’t had chance to test on tablet.
Thank you
I remember that menu 
It seems to work on my iphone5s ok but I don’t have android to test.
However if you are relying on css :hover to work consistently across mobile then that would likely be your problem. Some devices treat ‘first touch’ as a kind of hover but others may treat it as a selection and navigate to the destination. Some have a touch delay and required pressing twice to get anywhere where hover styles have interfered.
I didn’t look at your scripts but I didn’t see any dynamic classes being added to the menu so I guess you are relying on hover only for mobile? Therefore I would suggest that for touch devices you remove the hover styles and make the menu work by applying classes when clicked and using those classes to open the dropdown menu.
Generally when I have dropdowns like this with relatively few links in each then for smaller devices I would display the menu fully expanded so there is no need for a dropdown. This makes it easier to navigate especially as now you have to click the hamburger to open the menu and then you have to click the dropdown to open the dropdown which is fiddly at best with fat thumbs on a small device
On further testing I do notice that on ios that when you touch the drop down link the hash in the href sends you to the top of the page and the page will jump up.
You would be better putting a non existent ID with the hash to stop the jump.
E.g. <a href=‘#nogo’>
It probably has nothing to do with the original issue but is slightly annoying.
Thank you.
I am using a script you kindly had prepared for me:
https://codepen.io/
and the tests here
ttri dot biz /fz_test/03
ttri dot biz /fz_test/04
ttri dot biz /fz_test/05
It does work on this site
https : //www dot tesoreriabahai dot org
whereas it doesn’t here
https : //www dot tesoreriabahai dot org/157
difference being Zen Cart version.
I went over the two codes, and I don’t recall having made changes to the menu, I will double check though.
Does that fail on android also. I know its difficult to check devices in codepen but if you fork and copy and then run it in codepen debug mode you should be able to run it on a mobile more precisely.
Are you saying one works on Android and one does’t? I don’t have android to test but I would suggest that you pull the menu out of both and try in 2 stand alone pages and re-test on android to see if one works and the other doesn’t. If they both work then implement the hamburger version just to check that the hamburger script isn’t interfering with the action.
If they both still work then its something else that is interfering with the menu and we’d need to look elsewhere.
The hamburger is broken in that one (all black) but seems to still work. The dropdown does show on my iphone5s though.
It does initially jump though because of the problem with the hash I mentioned but the slide down dropdown works ok. Is that not working on android?
If none of the above produces a result then I suggest either of the two options I mentioned above.
Replace the hover for a click using js for mobile.
Avoid the need for click by opening the dropdown by default in a nested menu effect.i.e. have all items on display.
I can help with both of those if that’s the way you decide to proceed however I suggest you take the time to carry out the tests I mentioned first. If I get time today I’ll convert my example into a click for mobile just to see how it goes.
Can’t seem to access those tests as it says domain has expired.
I’ve added a click routine to a forked example of my original codepen:
It’s hover on hover devices and click on touch devices. It needs testing in actual devices as I haven’t fully tested yet. It adds a class to html if touch is detected and uses that class to change the css where required. The js adds a class of .hover to the list element when clicked and that class is used instead of the normal :hover routines.
The hover styles are inside a hover media query so only devices that can hover get the hover styles (otherwise they interfere with the click).
(Support is modern browsers only but those that don’t support the hover media query will get a basic already opened display as in the screenshot below)
This is a screenshot of my other suggestion and you just have the dropdown menus open by default on touch devices.
Yes.
Thank you for the js version, I’ll try implementing it.
Meanwhile following your suggestion I stripped the two and put them here
tesoreriabahai dot org/fz-test
the 156 does not seem to jump, whereas the 157 does jump (added the #nogo), however they both open the list.
The jump occurs if the menu is higher than the screen.
I thought it could be a jquery version, but by trying to swap them won’t affect the behaviour.
Sorry I forgot to mention that both use bootstrap, the 156 v3.3.7 the 157 v4.5.3
No worries.
Just signing off for the night so will have a look again tomorrow
Yes that’s because a hash in an href <a href="#"> takes you to the top of the page but if the page has not scrolled then there is no jump as you are already there
Both those also seem to work ok on my iphone ok and if you say they both work on Android it would seem the problem may lie somewhere else. I would still suggest however that you implement the JS click version as that may solve the issue and indeed will be more reliable although at the expense of some complexity.
These days I tend to avoid any hover menus on mobile and either do a click menu for both or as in my latest demo have click for touch devices and hover for hover devices but keep the code separate. (Having a hover actin and a click action is the worst of both worlds as you can’t click without hovering at the same time).
Note that the double click to activate is usually an ios problem but maybe has followed suit these days.
Sorry I can’t find an immediate answer to the problem.
Don’t even mention it, I am the one who just has to be grateful.
On further investigation the problem is with both versions, and don’t think is related to the menu alone, as I noticed that whenever hovering it takes you to homepage, i.e. if you are in home it reloads it, then you can hover, and select the page you need, once there (new page) if you hover it takes you again to home.
I was able to connect to the device thru debug tool, and nothing is shown under console!
Anyhow, I will experiment with the js, or get rid of dropdowns till the list is short.
Thank you.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
