Hi,
I tested http://cea4autism.org/ on a iphone and my drop down menu did not open.
At first I thought this issue was related to mobile browsers. Then I tested on an iPad and it did work. This confused me!
I just tested on my computer and made the browser window small. The menu did not open.
It happens when the menu pops up to the top right and gets slightly smaller. This seems to be when the window is about 610 pixels wide.
Any ideas on how to fix this?
Also any suggestions on how to handle the menu on really small screens such as phones, it starts to flow to 2 rows when the window gets down to 400 pixels wide
The submenu has been turned off at small screen sizes in the media query.
#branding #mainnav ul ul {
display: none;
}
#branding #mainnav ul ul ul {
display: none;
}
#branding #mainnav ul ul a {
display: none;
}
The reason is that dropdown menus on small windows are very hard to use - if they work at all. There is no such thing as hover on ipads/iphones although a first touch is sometimes seen as a hover on focusable elements but what happens is the menu comes on but won’t switch off and stays in the way unless you navigate away.
Therefore most responsive sites get rid of large dropdowns at small window sizes. The top level of a menu should always link to a page where the sub menus are available anyway.
Some sites do use a single button dropdown for mobile but will need to be handled with some scripting.