Reputation: 51
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
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:
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