Streaming live at 10am (PST)

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


#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)


#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;

https://bugs.webkit.org/show_bug.cgi?id=141832

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>


#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.


#6

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