CODEWITHSUNDEEP
htmlcsspositionzoomingfixed
user3223658
user3223658

Reputation: 51

CSS "position: fixed" not working right on mobile device when zooming

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?

Upvotes: 4

Views: 2528

Answers (1)

Hacktisch
Hacktisch

Reputation: 1514

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.

Upvotes: 2

Related Questions