The menu item of the current page jumps to one side of the Navbar

Floating Navbar item

Floating Navbar item

Floating Navbar item

Floating Navbar item

By Vincent Bidaux, published on
April 27, 2017
This post has been featured on the
Webflow blog
In the Navbar, the link of the current page suddenly moves to the beginning—or the end— of the menu.
Fix
Removing the float property on the Curent state of the link addresses the issue

Navbar items come with extra states. On top of the normal and hover states—that all element have—they have a Current state. When a link shows the Current state it means its target has been reached. If it's a link to a page, this means we're on that page, if it's a link to a section, this means the top of that section is in the viewport (the screen).

It's very easy to overlook that and to start giving properties to a Navbar item, not realizing you're in fact styling its Current state. On top of which we're all often styling the Navbar on the Homepage, starting by the Home Navbar item.

That's the scenario, you have the Home Navbar item selected, it shows the Current state but you ignore it, you try to fix the position of the item and along the way, you set it to float:left. But you don't notice because it doesn't have a radical change on its position. Now weird things happen, when you click another link to reach another page or another section, that link floats instantly to the left.

The fix

To fix this, you need to remove the float property of the Current state. And to do this, you have to select a link in that state. For example go on Home page and select the Home Navbar item. Then notice the Current indicator near its class, that's how to be sure you're styling the Current state.

Now clear that float, and things now behave how they're expected to.

Check the Stucture demo
This is the
Fixes
category
Posts in other categories