Auto Hide Navbar

[Chris_Allard]

Continuing the discussion from Navbar: Initial Release!:

@danro

We’re happy to announce our latest addition to the Webflow family of UI components: the Navbar. Our initial release of the navbar will focus on core functionality and navigation between pages. Future releases will add extra features, so please let us know what you’d like to see!

Getting Started

Simply drag a navbar from the library and drop it into your site.

Navbar Layout

With a navbar in place, you’ll see a default set of elements including an (optional) container element to ensure your nav elements align with your site’s other container-based content.

Here is the navbar structure as it appears in the webflow navigator. You can rearrange your layout here (e.g. if you prefer a navbar without a container).

Open State

Change the navbar to the open state using the Open Menu button, found in the settings panel.

Once the menu is open, you can style the Menu Button (aka ) along with its fancy new Open state. Boom!

Current State

When you hook up the Nav Links to other pages in your site, the links will auto-select if you are currently on that page. This also means you can style them using the new Current state.

Menu Breakpoint

You can control when your navbar collapses across each media query, using the Menu icon slider found in the navbar settings. Note: It’s wise to set this in the beginning and leave it. Switching this setting after you have designed your navbar will result in styles looking out-of-place.

More on the way!

We’ve got some cool extras planned for the navbar that didn’t quite make the initial release.

• Auto-hide + show on scroll (similar to headroom.js)
• Sticky position that attaches to viewport on scroll
• Select current Nav Link based on #anchor id

As always, your feedback is essential. Please let us know how we can make the Navbar better!

-Dan

Are these options still going to be worked on anytime in the near future? It would be a great addition to work with.

[MinewireNetwork (Minewire Design)]

As a matter of fact, you can do this with interactions in Webflow.

A full tutorial can be found here: http://tutorials.webflow.com/nav-appears-on-scroll

I hope that I could help!