Responsive navigation bar - Web design tutorial

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
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Learn about responsive web design:
webflow.com/blog
Get started with Webflow:
help.webflow.com/courses/gett...
webflow.com
/ webflow
/ webflow

[@naomiloy665]

just wanted to say that all the little jokes in these tutorials are really helping to brighten up my day :) thanks

[@markaaronbarrett]

Lol, the jokes in these tutorials are so great. Actually, EVERYTHING about these tutorials are masterfully done. Thanks!

[@dsi-films1264]

I know right, and the jokes xD

[@mr-be3sw]

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

[@baniaf]

every such tiny little jokes that you all put in these video, it help me a lot! THANK YOU THANK YOU YOU ALL THE BEST BEST BEST EVERRRRR 😭😭😭

[@mancerrss]

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?

[@user-ui3jo1um8b]

wow i actually love these tutorials, good job folks

[@camillecharles4125]

Hi how do you get to put the Logo in the Navi box, without changing the navigation bar size. when i put my pic art logo the nav bat gets huge how do i prevent that?

[@lenzocorner4467]

This is really helpful. Thanks!

[@ShutterlabCreative]

How do you edit features of the mobile menu dropdown? All I see is an 'icon'.

[@HeeyHiRoger]

need that sauce on the galaxy image

[@krisxzto]

why i cannot resize in webflow like you do in video and when i try to see 'brands' from navbar in live version, there is no picture showing up

[@picfactory]

I have found that few things in Webflow work the way they show it in these videos. It's just an exercise in frustration.

[@cosgravehill2740]

@@picfactory Webflow is extremely clean and consistent, especially compared with builders, but it's not just a builder, and therein likely lies much of the disconnect between videos and some user experiences. Webflow responds just like code does. All of the elements are related through HTML flow. It's more like working in Word, where an element is affected by the element that came before it and not just arbitrarily placed wherever it's dropped. If you miss even a tiny step a big chunk of what you do won't behave as you expect. You really need to have a basic understanding of HTML and CSS to troubleshoot misbehaving elements in Webflow. But why deal with that? Control, simplicity, responsiveness, the list goes on. If you just want to play around and create a site for your kid's soccer team closed source builders(they own your site and always will) like Wix, Squarespace etc. can get the job done and are simple to use. If you need results from a website and you insist on the DIY route you need to buckle down and invest a lot of time learning a lot of things - Webflow being just one of those things.

[@mariofluhr4634]

Is it possible to get the Burger menu on the left side and the logo centered? Somehow I cant figure that out...

[@Webflow]

Hey there! Yes, it's possible by updating the layout of the navbar and the elements inside. Since there are many ways to do this, this is a great question to ask on the Webflow Community Forum (forum.webflow.com/). Please, post your question with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.

[@rahulc0dy]

@@Webflow please make this designer an app so that i can use offline. Or at least a chrome Web app. Please please please please🙏🏿🙏🏿🙏🏿

[@SAMIR-consulting]

the best tutorial style on the internet

[@myselfrbr9966]

Which software is this ?

[@aliusman3467]

I need these where can I find these :) 🤣🤣Periodic table element

[@FirebrandVOCALS]

Does Webflow own all your content and therefore you will never have complete ownership of your sites? Just curious.....

[@rosspennock9426]

how do you add a button into the navbar without messing with the link positioning or alignment?

[@Webflow]

You can try using flexbox to align your elements exactly how you need. Here's more information on flexbox: university.webflow.com/lesson/intro-to-flexbox Also, this coming Wednesday, March 30th, 2022, we'll be doing a live demo on how to build a mega menu on Webflow: kzbin.info/www/bejne/g4S9gZqsYtWNrcU

[@sydakmal]

i know my laugh can't be 'invisible' too' >

[@evansimpson6652]

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?

[@shadab_0706]

What's software are you usign bro ?

[@trevorpeterson6068]

Webflow

[@shadab_0706]

@@trevorpeterson6068 can you send any of your social media account link To talk you

[@trevorpeterson6068]

@@shadab_0706 we can chat through here 😂

[@shadab_0706]

@@trevorpeterson6068 my whatsapp no. [phone] send me text

[@miketorres9643]

Is this like wix?

[@Webflow]

It's nothing like Wix. Webflow allows you to add HTML and write CSS and JS visually. Why don't you give it a try and then let us know what you think! webflow.com/dashboard/signup

[@rahulc0dy]

Please make this an application or at least a chrome Web application. This is the best and most flexible designer I have ever seen. 🙏🏿🙏🏿🙏🏿🙏🏿

[@jhonrvlogger]

what´s that software?

[@Webflow]

Hi, Rawed! What you see here is Webflow: a professional design tool that lets you design, build, and launch websites without having to code. Check it out at www.webflow.com!

[@jokesonyou8993]

@@Webflow Hello Sir , Is that free no hidden something to be paid? cause I'm just a ordinary student.

[@Webflow]

@@jokesonyou8993 You can use Webflow for free and you can purchase more features by subscribing to a premium plan. Learn more about Webflow pricing and plans here: webflow.com/pricing As a student, you can get a 50% discount on hosting plans which allow you to publish your project on a custom domain with an SSL certificate. Adding hosting will also unlock many premium features. Learn more about the student plan here: webflow.com/students Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! You can reach out to our customer support team here: university.webflow.com/contact

[@RajanKumar-kk8kb]

Plz sir. Give me software link

[@Webflow]

What you see in the video is Webflow: a professional web design tool and hosting solution which lets you build dynamic, interactive, responsive websites visually without having to code. Check it out! www.webflow.com

[@delizade]

responsive? where is it in this video?

[@kevinhannon4743]

🔥

[@juanpabloalfonsosanchez3385]

"less horizontal real state" ajjajajjajajajaa