Navbar: Initial Release!

Announcements Updates
1

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.

2187×970 264 KB

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.

2880×1494 401 KB

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

1022×552 66.3 KB

Open State

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

2130×766 137 KB

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

908×487 58.1 KB

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.

1120×483 64.8 KB

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.

748×772 81.7 KB

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

13 Likes
2

Guys, you don’t even have to explain. Everything is so well made & executed ! I was about to release. Just in time !

2 Likes
3

Great feature. I have just hooked it up but I’ve come across some strange behaviour when used with Facebook oAuth login. The problem is that Facebook is adding #_=_ to the location return url and this causes the menu icon to not work. If I remove the #_=_ from the url in the browser bar after landing the menu works fine.

I have seen this article http://stackoverflow.com/questions/8554277/why-does-return-redirect-in-asp-net-mvc-redirect-to-http-example-com that seems to think it’s related to jQuery mobile but I’m not sure if jQuery mobile is used in the navbar. I tried adding the following code but it hasn’t worked.

$(document).bind("mobileinit", function () {
              $.mobile.hashListeningEnabled = false;
});

Can you suggest a fix please? I know that I can strip the hash from the return url but that’s not very elegant.

Thanks,

Liam

4

Actually don’t think it’s purely down to Facebook oAuth. I think it’s browser related as I don’t see the hash string added in IE11 and I don’t get the same problem. I do however get the hash string and navbar problem in Firefox and Chrome.

5

OK. Please excuse me solving my own problem but I thought this might be useful to others. I found a thread related to this and a number of solutions. http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url

This one works for me.

 if (window.location.hash == '#_=_') {
       history.replaceState
               ? history.replaceState(null, null, window.location.href.split('#')[0])
                : window.location.hash = '';
        }
6

Hi. I’m using “Over right” as a foldout menu in responsive views. I’ve set “Body” to height 100% (wanted to have fullscreen slider). Fullscreen slider looks ok. Everything looks OK. Everything but the foldout menu. It’s stuck at height 100% (height of monitor, not height of website content). So it stops at certain point.

Can’t show an example right now, because I removed 100% height from body. But seems like a bug, or can it be fixed somehow with a trick?

7

@rowan While this is not a bug, this is a feature we should support. So I’ve pushed a new setting to the Navbar settings panel, which allows you to configure Over Left and Over Right menus to fill the entire page height (instead of the window height when body is set to 100%).

Hopefully that helps!
-Dan

3 Likes
8

Brilliant! More than I asked for. I will try it right away.

9

Not sure why, but when I changed where my nav buttons catch on the page a few days ago… they stopped focusing correctly. It just blinks before it gets there. When it first happened, it would just focus where it was assigned last so I put it back because I was short on time. Today… it just blinks and I can’t figure out why.

Here’s an example:
https://webflow.com/design/v1indahmua0314?preview=d0ce089c60d815edda9373bc608bf39d

10

@thegrafiqlyfe

This is happening because your sections are vertically too short. When a section scrolls into view, the nav links are only given “Current” state while that section is within the viewport (50% from top or bottom).

If you increase the size of your section elements and/or place your content inside the sections, that should help!

11

Please create a new linked topic if you have further questions.