4

I'm implementing a fixed vertical menu. It works great on desktop and looks great on mobile devices (IOS, Android)... as long as you don't zoom in on the page. When you zoom on a mobile device, the fixed element begins covering the other page content (as it should since it's fixed to a certain place on the viewport).

But what I'm looking for is a navigation bar that's only fixed vertically. So if you zoom in and scroll horizontally the navigation bar doesn't cover the content. Is there a way to do this?

Smi
  • 13,850
  • 9
  • 56
  • 64
user3223658
  • 51
  • 2

1 Answers1

2

This is a common problem and as far as I know there is no way to fix only vertically using merely CSS. You have the choice between either:

  • Disable zooming using viewport meta tags (but this can be bad for accessibility).
  • Control the menu position using javascript on mobile devices. For instance by instead of using a fixed position, give it an absolute position and on every window.scroll event, update the top position of the menu. This however will result in unpleasant results on devices that aren't state of the art (so on most devices you will see the position update with constant shocks). Second issue will be the smooth scrolling on Apple devices which prevents you from getting any information about document scroll position during 'smooth scroll'. So you would then also have to disable the smooth scrolling (possible with a CSS line on the body) but this also gives the user a negative experience.

This is why the menu is usually turned into a hamburger icon and only appear once the hamburger icon is pressed. The little hamburger icon will not be so annoying in the top left corner during horizontal scroll, as it is quite small.

Smi
  • 13,850
  • 9
  • 56
  • 64
Hacktisch
  • 1,392
  • 15
  • 33
  • Is it possible to zoom certain divs only? – user3223658 Sep 22 '15 at 22:10
  • For example the content – user3223658 Sep 22 '15 at 22:10
  • No, the mobile browser will not give some native option to do that. To prevent zooming of a certain element, again you should use javascript. I found this answer which prevents zooming of an element: http://stackoverflow.com/a/23683501/1701813 He also sets the position to the left of the document using javascript – Hacktisch Sep 22 '15 at 22:17