Wanted to share some solutions on problems I stumbled upon.
On mobile view I wanted the navbar fixed on bottom like apps use to do it. First problem i ran into was that it didn’t open at all, well it did open but only inside the navbar. Tried a lot of solution but ended up with some custom css. There´s a webflow added class to the nav menu, .w-nav-overlay. That I set to position fixed. I also styled the nav menu to position fixed in the designer.
<style>
.w-nav-overlay {
position: fixed;
}
</style>
So that solved the problem with nav not showing up when I placed the navbar element at bottom on mobile views.
But another annoying problem was that every time you pressed the button for the nav iOS safari navigation appear so the button needed to be pressed twice. So to solve that problem another small custom css was added. Found it on the internet.
<style>
html, body {
height: 100%;
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: scroll;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
}
</style>
Here’s a designer preview for you:
https://preview.webflow.com/preview/app-like-navbar?preview=105fbb68a974f7643f2f50f774fccd83
And here’s the demo:
http://app-like-navbar.webflow.io
Any tip if this is somewhat wrong approach or anything else will be much appreciated.
Update: I noticed that I on iOS couldn’t scroll to top as you normally can.
Update 2: I’m not going use this on the site I’m building. Even though I want to solve some things it’s not good to mess with native functionality. But the trick can be useful in some cases. Another trick is to hide all browser controls when It’s added to the home screen for a app like feeling.
