You’ve got a lot of options when adding navigation to your project, and one of the most common and powerful ways to do this is through a navbar.

The navbar gives site visitors a good top-level view of the content of a website. On devices with less screen real estate, the navbar can also be configured to display a menu button which lets the user access that same navigation in a hidden menu.

We’ll cover five aspects of the navbar:

1. Adding a navbar
2. Anatomy of a navbar
3. Configuring the brand or logo in the navbar
4. Adding and styling links
5. Reusing the navbar throughout the project

Steps in the video:
00:00 – Introduction
00:37 – Adding navbar
01:05 – Navbar anatomy
01:56 – Configuring brand
02:47 – Building out links
03:50 – Reusing navbar

———-

Learn about responsive web design:
https://webflow.com/blog

Get started with Webflow:
https://help.webflow.com/courses/getting-started

http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

source

22 Comments

  1. Please make this an application or at least a chrome Web application. This is the best and most flexible designer I have ever seen. πŸ™πŸΏπŸ™πŸΏπŸ™πŸΏπŸ™πŸΏ

  2. Is there any real way to edit the navbar? I want to make a responsive web page but I don't want the exact layout of the navbar that is given in webflow. Like what if I want to move the logo to the right of the other links, or if I want to stack the links one on top of the other?

  3. How can I specify or customize the Margins of this Navbar premade component (both the Brand and Text Links), if you'll see there at the video, it's already at the 0. I want it wider. But when I'm doing that it breaks.

    Also will it be too trouble to customize the anatomy of the premade Navbar, bc I actually want a 3 collumn nav bar, like on Tesla website (see the website) where there's Brand logo at the far left, middle text links, and far right text links? Is this possible to be done on the premade Navbar…

    …or should I make my own Nav bar usings Dibs instead?

  4. Thanks for the video! Is there a way to change the appearance of the menu button in the tablet and mobile version of the site without coding. ( for example make it two lines instead of three line or smaller, thiner, thicker etc..) πŸ™‚

Leave A Reply

Please enter your comment!
Please enter your name here