Cascading menus on smartphones…

philvern · Member · May 15, 2015 at 7:31 pm
Copy link

Add topic to favorites
Hi,
I’m new to this forum.
First of all, thank you for offering a way of easily setting up websites and blogs.
My theme is Twenty Twelve, the same for several blogs. And my question/problem is general :
I use cascading menus.
Everything is perfect on Computer and Tablet.
Things get worse on smartphones :
On Android, it’s ok, provided you hold it in landscape mode… only…
On iOs and Windows (for phones), it’s all wrong: the menu appears as a simple list in one block, whether in portrait or landscape mode…
How to have a cascading menu that appears properly
1) on all OS, at least in landscape mode ?
2) on all OS, in portrait mode as well ?
ariwinokur · Member · May 15, 2015 at 8:24 pm
Copy link
Can you fill us in on what site you are having these issues, so we can guide you accordingly?

Thanks!
jeremeylduvall · Member · May 15, 2015 at 8:28 pm
Copy link
Hi!

The menu is actually designed to appear that way (without child pages) on mobile devices to make the navigation a bit easier. However, we could make a few CSS tweaks to adjust this. For example, the following code would separate out the parent items and child items on mobile devices on the Twenty Twelve theme a bit more:
```
@media screen and (max-width: 600px) {
	.main-navigation {
		text-align: center;
	}
	.menu-sidebar-container {
		text-align: left;
	}
	.sub-menu {
		margin-left: 20px;
	}
}
```
Here’s an example of what that would look like when the menu is expanded:

http://d.pr/i/1hC53

Would that work? Without CSS (with is included in the Premium bundle), I’m afraid you will not be able to change this behavior.
philvern · Member · May 16, 2015 at 11:23 am
Copy link
Thank you Jeremeylduvall for the answer.
The example of which you give the link doesn’t really look like what I want. Too old style for me.
Why are those cascading menus correctly handled on Android mobile landscape mode, and not on the other OSs ? Especially iOS…
jeremeylduvall · Member · May 16, 2015 at 3:19 pm
Copy link
This is likely due to screen size. Can you let me know what Android phone you’re using so I can test?

Just a note, currently, you have the mobile theme turned on here:

https://philvern.wordpress.com/wp-admin/themes.php?page=mobile-options

Your menu should now resemble this:

http://d.pr/i/1hZ8O

The default mobile theme will replace the Twenty Twelve theme on mobile browsers. You can read more about that here:

https://en.support.wordpress.com/themes/mobile-themes/
philvern · Member · May 16, 2015 at 4:33 pm
Copy link
Jeremeylduvall, you save me !

My menu is so much better now on iOS.
Shame on me not have seen this option…

— The Android on which I tested is a Galaxy S4 (5″ screen) —

Thank you so much !
philvern · Member · May 16, 2015 at 4:42 pm
Copy link
Just one more question Jeremeylduvall: you turned it on, or it was already turned on ?
jeremeylduvall · Member · May 16, 2015 at 7:36 pm
Copy link
You should see the same view between iOS and your S4 currently. Can you confirm?

> Just one more question Jeremeylduvall: you turned it on, or it was already turned on ?

It was already on when I took a look today!
philvern · Member · May 17, 2015 at 10:30 am
Copy link
Correct. Same thing now on the S4 and iOS.
Thanks again!
jeremeylduvall · Member · May 17, 2015 at 4:12 pm
Copy link
No problem! :)

No items found.