0

I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.

Illustration of the problem:
Without zoom No Zoom

With zoom With zoom

I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?

Community
  • 1
  • 1
rob
  • 2,904
  • 5
  • 25
  • 38

1 Answers1

2

There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.

Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
  • Exactly. If users are zooming in, they are literally asking for your page to be larger; respect their wishes. – Euro Micelli Mar 20 '13 at 11:05
  • I want to respect their wish to able to zoom and see the content bigger:) I'll probably just remove the navigation because it was only scrolling to the respective sections anyway and leave only the logo which is also the "home" button. – rob Mar 20 '13 at 12:05
  • @rob off canvas menus are good if you want to save screen space http://css-tricks.com/off-canvas-menu-with-css-target/ – Daniel Imms Mar 20 '13 at 12:35
  • @Tyriar Thanks... this is better than my solution two ways... more space and no zoom problem:) – rob Mar 20 '13 at 12:51