Where did the Menu go when viewed on an Ipad vertically.

December 28, 2013 5:51 AM

I purchased a template that adapts to the device it is being viewed on. It works as it should on all devices I've tested it on except that when viewed on an iPad - specifically in portrait - the top menu disappears. When viewed in landscape, it is fine. Link to the (totally SFW) template running on my server after the jump.

The template in question.


I am assuming it is some kind of width issue, but i don't have the skills to diagnose it (hence why I bought a template :-)

posted by sandra_s to Computers & Internet (9 answers total)

It probably is a width problem - which template is it? Do they describe this behavior (removing the menus when they don't fit)? Have you tried reducing your menu items to 2 or 3 to see if it works in portrait mode?

But in any case, I don't know if I'd worry too much about the menus in portrait orientation. I and I think most iPad users surf in landscape or know to switch to landscape if a certain website doesn't seem complete in portrait.
posted by nightwood at 6:06 AM on December 28, 2013

Response by poster: @nightwood I reduced the menu from the original (what you see there, gradually down to only one menu item, and it still just disappears in portrait. and I'm not seating it too much, its just that it is definitely something wrong and it annoys the bejeezus outta me ;-)
posted by sandra_s at 6:18 AM on December 28, 2013

Response by poster: Datapoint. Just found out it does the same thing on an android tablet. :-( Smartphones work fine, though becasue its a different layout altogether.
posted by sandra_s at 6:22 AM on December 28, 2013

I'd contact the author of the template at ThemeForest for specific help on this - if they claim it to be "Ultra Responsive" then it should work on ipads and android tablets and will help other purchasers (if a solution is offered).
posted by humph at 6:53 AM on December 28, 2013

Yeah, it seems to have been a design decision by the author. As humph said above, your best bet is to contact the author. If you are comfortable with coding, etc. you might take a look in his template where he detects portrait mode (or minimum width) and turns off the menus.
posted by nightwood at 7:30 AM on December 28, 2013

I just narrowed my browser window to see if I could reproduce the problem. Sure enough, the menu vanished. I then stretched the browser wider and narrower a few times, then the menu didn't vanish, rather it became a drop-down in the right side of the header. It's being replaced by a script called selectnav.js.

I have no idea why it's not working on iPad in portrait (or why it didn't work right away in my browser when I narrowed it). But yeah, the script is designed explicitly to replace the regular menu with a drop-down on narrower screens.
posted by under_petticoat_rule at 9:44 AM on December 28, 2013

But yeah, the script is designed explicitly to replace the regular menu with a drop-down on narrower screens.

This is a very common design choice in the responsive layout world.
posted by humboldt32 at 10:10 AM on December 28, 2013 [1 favorite]

This is a very common design choice in the responsive layout world.

The design choice isn't the issue, the malfunction is.
posted by under_petticoat_rule at 10:31 AM on December 28, 2013 [1 favorite]

As i memailed the OP - i think it's a parameter in the underlying 'bootstrap' framework @grid-float-breakpoint where the navbar switches from collapsed to horizontal. It may be that the theme doesn't handle collapsed well, but the OP may just want to lower that parameter so it does not try to keep the menu collapsed for ipad and android portrait orientation.
posted by nightwood at 10:42 AM on December 28, 2013