Streaming live at 10am (PST)

Bottom navbar solution


#1

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.


#2

That’s a very good way to get two scrollbars. Here’s your demo as seen in Google Chrome Windows:

The inner scrollbar works, the outer is shown disabled. The inner scrollbar goes behind the navbar.


#3

That’s not good =) I’m not seeing that in chrome on Mac.

Edit: Or in Firefox and Safari, Mac


#4

Hi @jorn - I didn’t spot it at first but I’m seeing double scroll bar too, same as Sam - Chrome on Windows. Regards Kai :smile:


#5

Thank’s for letting me know. My use case for this solution was to only use it on mobile view not on desktop.


#6

My pleasure! Ah! :smile: - In that case, it works great on my phone! Best! Kai