menu responsiveness on mobile devices

colak · 2015-04-14 15:18:11

I am updating neme-imca.org with a fluid design. I have a responsive menu which although works kind of OK when I resize the browser window, it does not work as expected on mobiles as it appears like it does on 960px wide screens.

Could somebody spot what I am doing wrong?

Bloke · 2015-04-14 15:22:49

Add:

<meta name="viewport" content="width=device-width">

to your <head> and it’ll probably sort itself out.

edit: some people add a zoom directive too, but I don’t know whether it’s necessary, nor in fact what it does. I’ve heard something about it fixing issues with mobile devices when changing from portrait <-> landscape, but I may well be misguided.

That meta tag is just something I copy and paste onto all sites and it seems to just work, so I shrug and walk away, muttering under my breath.

Last edited by Bloke (2015-04-14 15:26:45)

colak · 2015-04-14 15:28:53

That did it!!!

Thanks so much Stef.

GugUser · 2015-04-14 16:48:36

<meta name="viewport" content="width=device-width, initial-scale=1" /> is recommended.

See it in CSS-Tricks.

colak · 2015-04-14 17:21:41

Thanks, I updated it with your recommendation.

colak · 2015-04-14 18:08:11

OK… Having done a lot of donkey work today I realised that the menu does not work when javascript is disabled. Any ideas or web link for any javascript independent responsive menu solution?

phiw13 · 2015-04-15 04:46:47

colak wrote #289999:

… I realised that the menu does not work when javascript is disabled. Any ideas or web link for any javascript independent responsive menu solution?

Use the @:target pseudo-class:

Give your menu an ID (#menu?)
in the href for your menutrigger button:

<a href="#menu" id="pull1">Menu</a>

in your stylesheet (you can use the same styles as the js enabled browsers, probably):

.no-js #menu:target { /* styles here */ }

colak · 2015-04-15 06:23:33

hmmm I think that the target pseudo element is not supported by ie and Opera >9.

bici · 2015-04-15 06:25:26

how i so love standards and web browsers.

phiw13 · 2015-04-15 06:34:46

colak wrote #290002:

hmmm I think that the target pseudo element is not supported by ie and Opera >9.

I hope you mean IE*8* and Opera less than v9 …

How many of your users, using those browsers, will hit that code path? (narrow screen + js off).

What I’ve done on one site, for IE 8 and older, is having the menu always visible, placed after the main content, user clicks the menu trigger, page scrolls down to the menu. If the browser does support the :target pseudo class, then the menu pops up similarly to js-enabled browsers.

To give you an idea: here is an example
(won’t work in IE 8 and older, you’d need the html5shim script)

Last edited by phiw13 (2015-04-15 06:46:36)

philwareham · 2015-04-15 08:00:15

You can do responsive navigation using purely CSS if you don’t mind having the menu visible on small screens. That works OK if the site has just a few sections. The menu here is just CSS alone.

But… why don’t you use something like responsive-nav.js for this?I don’t understand why you are making life difficult for yourself. The fallback for people with JS disabled is to see the menu on small screen as above in the pure CSS version – no biggie. This is an example of the menu mentioned above but also using responsive-nav.js.

Also, Opera >9.5 handles :target just fine – and anyone surfing on Opera older than that are crazy and can probably be counted on one hand. IE8 doesn’t but then IE8 also doesn’t support media queries so why bother doing responsive sites on IE8 (lock it at the desktop size)?

Bloke · 2015-04-15 08:40:46

philwareham wrote #290005:

why don’t you use something like responsive-nav.js

Handy, thanks. Out of curiosity, do you know if it supports multi-level menus? I assume not since there are no demos I can find showing off that feature.

Textpattern CMS

Textpattern CMS support forum

#1 2015-04-14 15:18:11