It was so easy to get a professional looking navbar with just 3 lines of code. This package seriously is so usable on mobile it is rediculous. I found this package from day 4 of the 100 days of gatsby challenge. It is by the wonderful man who brought us gatsbyjs Kyle Mathews, so you know its gotta be good.
installation is easy
npm i react-headroom
There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out.
import Headroom from 'react-headroom'
Simply wrap your existing content, Nav in my case, with the
<Headroom /> component and your off to the races. The content will pop back into view when you scroll past then back up.
<Headroom> <-- Your content goes here --> </Headroom>
See it in action
I think this simple package completely changes the ux of your site on mobile. You can get that sticky nav out of the way, but its still right there with just a little bit of a scroll up.
Here it is on waylonwalker.com
react-headroom is configurable, but I did not find it necessary. I really like the simplicity that it brought by just adding the
Check out the relavant links for more details.