Why are (fixed) sidebar navigation menu's so annoying on mobile?

Design help General
1

When you scroll down the page on a webflow website (anyone) that has a sidebar menu, the menu gets jumpy and looks awful.

Here is an example of one of the free webflow templates … here

here is a screenshot of the issue on an ipad mini

notice how the bottom of the side bar jumps up as i scrolled down? … thats when i took the screen shot… you can see the sidebar jumped up a bit

looks awful

this happens on 100% of websites i tested (which have sidebars)

1536×2048 476 KB

2

I should note that I’m referring to “fixed” sidebars… which arent suppose to move…

in the webflow editor they dont move at all but in the live versions they do

3

This issue has ruined my design because I will not settle for a flawed website in any way and I’m super disappointed about this. I’m glad that I noticed now and not later.

Even the slightest awkward flaw can ruin the vibe of a website…

I feel like this is not going to be fixed and if it isn’t I think that webflow should be clear about their flawed sidebar menu’s… so that other people don’t waste their time.

4

Hey now @Cara

Before you shoot down the hard work of designers, maybe you should take a look the article below. This is a known issue with webkit browser while using a 100vh fixed element;

141832 – Viewport height is taller than the visible part of the document in some mobile browsers

This was very intentional in recent versions of webkit based mobile browsers.

Workarounds

  1. Set body height to 100% and then place the fixed nav directly under the body element and set that too to 100% height.
  2. Use 100vh height instead (simplest way)
  3. Optionally, use CSS Calc rule to take care of the address height difference in those browsers;

<style> .nav { height: calc(100vh - 60px); /*60px is a common height for most address bars on mobile*/ } </style>

1 Like
5

I’m not worried about the issue anymore. I’m glad I encountered it. I know how to work around it. I deleted the website and am starting over. (didn’t need to but chose to)

I’ve had some creative ideas which will be an improvement and will have no issues.

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.