- This topic has 14 replies, 8 voices, and was last updated 11 years, 6 months ago by
.
-
Posts
-
Anyone else been troubled by this? When viewing a site on a phone or tablet is seems impossible to access any items under the menu. The problem exists on the StudioPress site for example: try to navigate to "community resources" under "Resources" for example.
I guess this is an inherent problem with having the top level menu item a clickable link. I was wondering if other people have come across this and how you've handled it.
My thoughts are:
1) Design the site so that it doesn't use drop down menus. This does seem to limit the navigation options.
2) Ensure that all lower level items are linked to from the page that the top level takes you to. Therefore all pages are still accessible.
3) Could the menu be designed so that tapping the top level drops down the other items but doesn't take you to another page?
4) There's actually some kind of gesture that makes this easy but no one ever told me!
I was just trying to get to the StudioPress forum on my phone and I just couldn't do it, it seems ironic that the site is mobile responsive yet key pages are inaccessible! Surely this is a real design problem? I was able to get to the forum via Google (and even that was hard as it linked to the old forum first!).
Just me or is this something on your mind too?
Cheers.
If am right, what you are trying to suggest is the "Mobile Responsive" approach of doing/showing things when people access your sites from moblie.
There is an excellent write-up on this topic at Smashing Magazine - http://wp.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/
I make WordPress websites using Genesis Framework.
Good article, thanks for that.
But no, what I am saying is that the nav menus on StudioPress themes are not functional on touch screen devices (and this may be a problem that affects all WP menus?). This seems a big flaw in themes sold as "mobile responsive".
You can see it here on the StudioPress site:
1)On a phone or tablet load up http://www.studiopress.com
2)Now try to access the forum under the Resources menu
3)As there is no mouse you cannot hover over "Resources" to get the drop down.
4)If you touch resources the drop down does appear, however you are whisked away to the resources page as you just tapped a link!Like I said, I could be wrong on this and actually there is a way to navigate these menus that I don't know about? Perhaps this is a known limitation and we just have to design our sites around it? Just really wanting to know what other people think before deciding how to handle this.
My site is geared to mobile devices so it's something I need to think about 🙂
You can 'long press' the resource menu, and then release it. Then you'll be seeing Forums in drop down menu. Click on it.
This is what worked for me. 🙂
I make WordPress websites using Genesis Framework.
Nope, doesn't work here. Long press brings up a new dialogue "open in new tab, open in incognito, etc".
But that's interesting, it makes me think it depends on what mobile browser you are using. Sounds like this is more a problem with Chrome than with WordPress.Anyway, for what it's worth I've improved navigation by adding another nav menu that changes dynamically depending on what page you are on. This ensures all options are available without having to go via the drop down. I think this is actually a better design as it exposes other areas of the site that were hidden behind the drop down - bounce rate has dropped since implementing. Tis all good.
Cheers.
I am setting up the Metro theme on a test site and I have this same issue you're having.
I have a menu I can use on non-WP sites, on a smartphone if you touch the main menu item, the dropdown appears, just like a mouse hover on a desktop or laptop, and waits for you to touch another selection before going there. If StudioPress has a solution for this I would prefer to incorporate that in the theme, but in the meantime, I'm going to try to hack this other menu into the WP site and see if I can make it work.
I think a lot of people would like to see this feature in StudioPress. I'll keep you posted on what I figure out, but if anyone else has a solution, please let us know.
Haven't tried on an iPhone, but my Droid Razr and Amazon Kindle both have the issue with these dropdowns. Could be something not noticed during development since most of it seems to be done on Apple products. Interesting.
#3 - set the top level nmenu item to not direct to another page by using # in place of the URL will drop down the secondary nav menus instead.
Thanks Susan! Sounds like the easiest solution although I'm actually really happy with how my menus are now working.
Curious to know how it works on an iPhone? So you press at the top and the drop down appears? What if you want to actually hit the top link? Just press again? What if you want to collapse the menu? I really can't see how it can behave the same way as with a mouse! tbh my site is an Android based site so I can't say I care too much if Safari handles this ;-)!
@Jezza101 - my solution means that the top menu item doesn't actually open up a page - there is no option to do that (so, if in actual fact, you wanted to have the option to open up a page, put that page as the first item in the drop-down.)
Take a look at the demo for the Pretty Pictures theme here: http://demo.studiopress.com/pretty-pictures/#
If you click on "Follow" in the menu, it doesn't actually open up, or lead anywhere, it's just a method of giving you the option to click the sub-menu items.
Just tested it on an iPhone - to remove the drop-down, you have to select another menu item.
This is something I ran into when one of my clients upgraded to WP 3.5 the day it came out without checking with me first 🙂
You used to be able to have a blank top menu item, and the dropdown items under it would work as normal, but with the upgrade to 3.5, those blank top items no longer worked 100%. They would work fine on computers, but you absolutely had to put a blank anchor in there or they would not function on any mobile devices at all (not sure why that updated behavior was forced onto everyone, but there you have it).
It seems to be a popular expectation with older people, seniors, so one client told me... in his experience with older clientele, they are used to seeing a dropdown menu and assume that since there are items that drop down, the top menu item isn't actually something they need to click on, so it shouldn't have a clickable action, else they might miss some info.
The reasoning still boggles me, but that's how more than one of my clients like it, and the WP 3.5 upgrade broke a lot of menus for a lot of mobile devices.
WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
Slice of SciFi | Writers, After DarkJust noticed this issue & its irritation as a user to not be able to navigate through a site with drop down menus The solution would be to use WordPress Bootstrap.
I've tested it across browsers & across devices & it works perfectly (touch screens aswell).
I had this issue a long time ago, and came up with an awesome solution based on a freebie that I found on another dev's site.
It's a bit hacked together, but if you guys are interested, I'll try to get it onto Github soon and I'll repost here.
In the meantime, just to make sure I'm understanding you, go to http://www.aqua103.net on your phone and let me know if that's more or less the kind of nav you're looking for.
I've made the Genesis Mobile Menu I've developed a widget that you can drop into a /lib/ directory within your child theme.
Let me know what you think:
- The forum ‘General Discussion’ is closed to new topics and replies.