Animated Responsive Navbar with CSS - Plus Other Useful Tricks

A beginner's tutorial for building a Responsive Navigation Bar with CSS that includes animation, duotone icons, flexbox, and other cool tricks! Source Code: github.com/fireship-io/222-re...
#css #html #tutorial
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

[@JamieMcI]

"I've got a fever and the only prescription is more Fireship!"

[@benjaminjameswaller]

Agreed.. it's very addictive.. often i just want to sit back and enjoy Jeff's tutorials like relaxing when watching Netflix which means I don't actually do any practice I just enjoy and relax.

[@charlesyang7233]

I literally have a fever right now and I’m binging fireship

[@dontreadmyusername6787]

@@benjaminjameswaller thats like totally fine atleast u r watching something productive

[@strum007]

You had me at, "you don't need Bootstrap"

[@secretaryofstate1]

Bootstrap is excellent

[@kongenerkasper]

Bootstrap is great for a simple layout but you can't really style anything except for colour changes.

[@secretaryofstate1]

@@kongenerkasper what? You can practically style anything

[@Justin73791]

@@secretaryofstate1 Yeah but why bring in a bloated styling library when you can make it yourself with more flexibility and control?

[@secretaryofstate1]

@@Justin73791 it’s not bloated ? But if that’s how you feel that’s fine .. we can have different views on that

[@cadeheinberg3047]

Since this video leaves out alot.. I am compiling a list that you should look at if you are stuck so far: SVG: simply just download the icon as an svg and open the file in a text editor to get the tag they have GEAR ICON NOT GOING TO BOTTOM: set the "height: 100%" in .navbar-nav{} ICONS GET TOO BIG WHEN NAVBAR EXPANDS: add "width: 2rem" in .nav-link svg{}

[@danilastasiuk]

bro u are a saviour, I spent almost an hour trying to edit the icons. Thanks a mill

[@G0rilla2829]

Thanks for the last one I couldn't figure out what was causing the icons expanding with the navbar

[@nothingjustbored7946]

how did he make the media query react while in responsive mode in chrome? it doesn't work on mine, and only works when I resize the browser window itself

[@ThePotatoSmash]

Perfect! Thank you very much :)

[@maxix545]

This dude is insane you learn so much in 10 mins and he speaks fast yet so clear that you can wrap your head aroudn what he is saying really quickly, thank you so much man. Seriously, greetings from Venezuela.

[@kubiatmorgan]

Amazing content! One of the few people that actually explain the "why" not just the "what". Your videos are absolutely amazing!

[@brodyf42]

I love the pacing. This is a great, straightforward tutorial. Thank you! One note for others watching: Make sure the main element has a bottom margin for the small screens. Otherwise, content will get hidden by the navigation.

[@abhinav.sharma]

PLEASEEEEEE MAKE THISSSS KINDAAAAA CONTENT MORE!!!!!❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

[@abhinav.sharma]

Also please tell us the trick that you use to paste the code in your tutorials...like it's super awesome...

[@Fireship]

@@abhinav.sharma It's just a simple delete in reverse, then ctrl+Z

[@abhinav.sharma]

I thought so...but then I was like...maybe there'd be another way... Anyway...you just sync it soooo well man...

[@henriherrera9744]

Yeah dude, this kind of things gets you instant subscribers.

[@TheElkster]

I make myself sit through so many You Tube tutorials, and generally like gain a lot of good info from most of them - but the way this tutorial has been put together is on another level! I love the way that you cover all these great points in such a short amount of time. It allows me to follow along in no time at all - and if I need to go back over anything - I can just hit rewind!!! Many thanks for sharing! ;)

[@kingstrikers23]

Absolutely love your content! It's so applicable, straight to the point, and understandable. (hopefully) constructive feedback: During the section around 6:05 it might be helpful to do a split screen view of vscode and the browser to see how each individual property changes the layout. Your voiceover is spot on. but seeing the code, browser, with the voiceover would be the holy trinity of learning.

[@TAURENIO]

This is the way most tutorials should be, simple, precise, with a good example and a link with the source code. Congratulations from the Dominican Republic.

[@samjaklic3619]

This is phenomenal. As a backend developer dipping my toes into UI design, this is so enlightening to watch. Thank you for displaying what can be accomplished by leveraging only base CSS and a monumental amount of creativity and knowledge.

[@MrR3set]

One of the cleanest, straight to the poiny and best tutorials Ive seen so far.

[@xhaiii]

-"You don't need bootsrap" Me: hold up that's illegal

[@victormonteirocunha4575]

Must say, I'm a PHP dev and have been so since I fell in love with programming (around 7 years ago) and I thought that'd be the language I'd study forever, despite the growing relevancy JS has kept gathering. Among many things, this channel eliminated much of the prejudice I felt torwards Javascript and frontend, with a coherent content and many tips that get me excited to mess with JS. Thanks for the excellent channel! Love from Brazil!

[@tejas8417]

Dude, I am out of words for you. I mean, a newbie can come to your channel, learn full-stack web development in 1 single day and make responsive full-stack web-pages within minutes!! 👍 I am new to web development and all these short videos are just making my day. I am more focused on the front-end than on the backend and I feel like I just landed in the perfect place to start. Thanks a lot, dude I don't know what I would do without these underrated amazing videos. Lots of love 🥰

[@mauriciabad]

Animating the width and filter properties may cause choppy animation in low end devices. To make it smooth everywhere I suggest: 1. Instead of filter, duplicate the SVG and overlap them. The one below with the filter and the one in top with color. Then simply animate the opacity in the top one. 2. Fix the width of the bar and with transform move it to the left making it look narrower. Position fix the icons and add a padding-left to avoid overlapping. Set the opacity of the text to 0. On hover just animate the translate and opacity properties. Great video!

[@alexcubed4270]

I like this style of videos a lot!

[@xfuttex]

All your content is amazing! Explaining everything so well without it being either to fast or slow. Great video quality as well! Love the channel.

[@DSAntrat]

If only you had been making content when I took my only programming classes in college maybe I would have enjoyed it more and gone into this field even sooner than I had. Really nice refreshers on front end dev for a back end dev suddenly being thrust back into the front end.

[@samheyman09]

+1

[@banpridev]

++1

[@gabrielraphaelgarciamontoy1269]

I have never learned more CSS from any video before. This was amazing! Thanks :)

[@thiagodemello8664]

I'm so glad I found a channel with such an amazing content

[@Fireship]

Thank you! Welcome to the channel :)

[@scaledeals-io]

This is one of the best tutorials I've watched on YT. Thank you! PRO TIP: Make sure to include .navbar {overflow: hidden;}, so that, in the 200ms while the navbar is expanding, the text and logo inside the navbar will not prematurely overlay onto the rest of the screen outside the bar.

[@cymonevo344]

I learn a lot of things in just 10 minutes with your video. Much faster than reading / learning the doc. What an amazing explanation! Well done!

[@optimusdebugger9638]

it is actually very nice to see you do more css content for the moment before switching back to javascript. Great content!

[@Techusiast]

I thought I was pretty good at CSS until I watched this, learned a few new tricks. Thank you and keep up the awesome work!

[@samihk1]

I am so grateful to Fireship and Jeff the ultimate Captain Frontend ❤

[@019KADESH]

I love you make videos this short. I actually took some time to follow along but the fact that is so short doesn't make it look to intimidating!

[@stonedizzleful]

I've had this on my 'to try' list for ages and finally did it today. Such a great tutorial. Thank you!

[@FilledStacks]

Great video!! A definitely life saver for non web devs as well. I struggled with my toolbar on my website. Will definitely be using some of the things you mentioned in here. thanks for the great content.

[@bhanuprataprana4662]

Boarding fireSHIP is awesome. Thanks captain for such a quality content. 🔥🔥🔥

[@stevenmuniz4870]

So first off love the 100 second series and several of the others. This is exactly what I need to brush up on things. More demos where we can make small super simplified products! Great work!

[@will2r]

the way you explained it in the beginning! thank you!! more like this pls 👏

[@dharmang]

Yes thank you so much. This would help me a lot :D 👍🏻 Edit - I tried writing this code and see what it does line by line. But the output is a bit different than yours due to you skipping some variables. Need to have a look at the code. Anyways thankyou ❤️

[@akhillshetty2140]

New to the channel. Amazing content brother!

[@Fireship]

Welcome 🍰 and thank you!

[@kevikiru]

These videos that demonstrate functions, problems and ideas are just plain better even for a semiexperienced programmer because they keep a person so much more engaged

[@junog5552]

MAN! The explanation along with the visual presentation, it's just amazing! There are very few people who makes such videos. Thumbs up, man! Like your content. Keep up! :)

[@Lokhnor]

My Zeus, this is the most amazing channel ever! Every wanna-be Web Dev's dream!!!

[@nelsonking]

YES! Love it! Up next, how to change theme of the navbar then after that, instead of showing the full name of the menu item upon hover, how about showing a tool tip with the name of the menu item. That would be nice.

[@Fireship]

I like that idea! There are plenty of ways to might improve the current demo.

[@tonym6878]

I think comfortably I can say I met a Guru on HTML & CSS. Hats off man!!! Thank you so much!

[@riddixdan5572]

My new favorite channel. Looking forward to more content. Ps, audio at start and end is a bit scuffed

[@cloclotlse]

I very rarely comment on videos on KZbin, but this one is really amazing, thanks a lot!

[@sawcondeez]

This is simple to follow at straight to the point. I love it

[@SilviuBurcea1]

Congrats! Absolutely amazing tutorial! It's the first video I'm watching from you and subscribed right away. Good explanations and also really good English!

[@bharathravi7820]

This is beautiful! It always bothered me to import bootstrap in every single project just for the navbar and grid. I started reconsidering it. Thanks! :)

[@raknos13]

CSS grid over bootstrap

[@samuelgunter]

@@raknos13 anything is better than bootstrap

[@BEPPEJHA]

I m here for the same problem, i have plenty of responsive navbars with bootstrap, but everytime it s a mess using all the classes and personalizing them, I m trying to find a final solution to have things simplier faster and customizable

[@pettgree]

already great: - "Let's push it further." me: (silent open mouth) 🤣

[@justcurious2439]

Thank you for taking the time to explain each of the elements you used; great video!

[@nmrisrl11]

You're the only channel, I've watched that explain every single line of code. Keep doing it and you will surely help a lot people! Rem: 5*16, I just had an idea about this lol!

[@sheririchardson9245]

Great video! 👍 This also made me realize I can target the last-child and set its margin to auto in order to separate items, instead of always using extra container divs with space-between.

[@Fireship]

Thank you! margin:auto is super useful in flexbox.

[@samuelgunter]

@@Fireship can you do a similar thing in css grid so you don't have to do a lot of media queries for the height of the main content based upon header and footer height?

[@SinMelchiah]

First of all, thank you! Awesome video, very helpful on getting a good grasp on CSS. I'm about halfway through the tutorial, and I'll finish it soon, with some minor adjustments to customize to my taste. However I went ahead and give the final product a go from github, and noticed that the sidebar had these ugly scrollbars in it (in google chrome). So I checked the CSS for something overflow related and found that the .navbar class had an "overflow: scrollbar;". Removing this line solved the issue for this supersexy responsive navigation tutorial. (Sorry if this was already mentioned before)

[@alijavaid4084]

Thank you!

[@arturmarek268]

Thank you :D You should make a pull request on his github

[@Asty__]

The video is very useful, and I learned SO MUCH in 11 minutes thanks to you! Thank you and keep up the great content! Looking forward to seeing more similar content!

[@Philosophy.and.Tostitos]

I just discovered this channel and I'm so happy :'D Thank you for this amazing tutorial!!

[@k3tna]

Beautiful. Thank you for that one. Quite informative stuff, explained perfectly. Would love to see a vid on JS code optimization basics (how to deal with time out when looking for a value in a huge array , or just general info on how to work with such arrays). Thanks!

[@Fireship]

Thank you! Interesting suggestion, I've considering doing some algorithm implementations in JS.

[@dipanjanghosal1662]

@@Fireship have you done it yet?

[@punsmith]

Fireship has become my favorite tech-oriented content channel. Diverse content (that contains more than your average react.js d*ck-riding, ugh). Thanks for this nice tutorial! Would have been helpful a while ago, but I can use this on my new project~

[@old-codermj-channel]

One of the best-explained video tutorials about navbar! Amazing ✨

[@ithahu4988]

I love how this video came out right when I needed it

[@Alex-pd5xv]

Amazing video, do git in 100 seconds

[@Fireship]

That is on the list, I want to do a whole collection of git in 100s videos.

[@dominikseljan3043]

@@Fireship Good thinking, git deserves many videos with advanced features.

[@Fireship]

Done kzbin.info/www/bejne/nqizaIqHoNJ4eac

[@evan.5967]

@@Fireship Hi! How to make your navbar in your website

[@amankaushik5833]

@@evan.5967 you can look at the source

[@adrigorithm]

I've had to set overflow to "auto" on the navbar, on "scroll", it seemed to be active even when not overflowing, leaving a permanent scrollbar.

[@deepsarkar8666]

Set overflow to none

[@sujaljaine]

@@deepsarkar8666 Why did he used the min-width? There was already code for larger screens. Does he use that code (min-width:600px) for the landscape orientation. Then, I think it should have been covered too from the main code??

[@jerry9548]

Thanks for this great tutorial. Definitely great for more advanced users but straight to the point and filled with great hints. Thanks

[@athawa]

Was just wandering along to see some nav tutorials. When I saw it till 3:00 immediately subbed Fireship. Awesomeeee!!!!

[@tackleberry8192]

Great video! Quick question though: Usually animating the width property of an element is ill-advised because it requires the browser to calculate the layout for every step, as opposed to a propertie like transform where the calculation is much later in the pipeline during the composition step and therefore much cheaper. Is this counteracted here by the fixed position or would you agree it's not ideal?

[@Brotisyt]

IMPORTANT: ::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).

[@fadyasaad1105]

REALLY THIS IS AWESOME!! You made my day. I was looking for something like this video that fits every thing I need together.

[@kenkioqqo]

This is amazing work. I have enjoyed every minute of the video. And on top of that, I've improved my CSS skills in 11 minutes and 39 seconds!!

[@cleonfernandes9054]

Could you please do a tutorial on svg? I'm so lost trying to add my own icons

[@johnchristaph5287]

stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file

[@rc3043]

How did you use the svg font awesome inline icons? When I go on their page there is only the option...

[@luc5483]

I had the same problem

[@gustavomoraes4199]

Faz o download do svg, abre com o chrome, clica com o botão direito e seleciona a opção "View page source". Aí é só você criar duplicar o , colocar class="fa-primary" no primeiro e class="fa-secondary" no segundo, e em seguida inserir dentro da tag .

[@luc5483]

@@gustavomoraes4199 eu te amo

[@rc3043]

@@gustavomoraes4199 Thanks for your answer but I can speak only english?

[@Dxpress_]

@@rc3043 You can download the SVG files directly from FontAwesome's website and import them into your projects. It's a little hard to see, but when you select an icon from their gallery, there's a small download icon near the bottom-right of the page title.

[@tubenzr]

Simple, to the point, focus, and complete explanation.. great channel.. really

[@_buns_]

I learned more CSS in this video then I did in my last internship. Great stuff!

[@abdulosman8846]

Watching old Fireship videos: "Comment and maybe win a free shirt" Me: "Find the latest video to try to get free tshirt"

[@sten6160]

.nav-item:last-child { margin-top: auto; } 🎉

[@davidmotz8963]

didn't work for me somehow :(

[@sten6160]

@@davidmotz8963 make sure you have `height: 100vh; display: flex; flex-direction: column;` applied on the nav-item's container element ;)

[@SMFahimIstiakShovon]

@@sten6160 Thanks. I was also having same problem. Solved now!

[@Zamael69]

@@sten6160 thank you thank you thank you :D

[@Kevin192291]

@@sten6160 Thank you, this wasn't clear in the video

[@Shreyanshdeb]

Man! This is quality content dude! Subscribed (without even seeing other videos)

[@PlanteraKiller]

I found this in my recommend just subbed! Amazing content!

[@TechdubberStudios]

I know how to do all these things, so I'll pass this one around and wait for the Electron + Svelte app tutorial patiently. :)

[@Fireship]

Expect more electron next week!

[@TechdubberStudios]

@@Fireship keep up with these straight to the point tutorials ;) I love how much value can be crammed in such a short amount of time. You're the best in that aspect in my opinion :)

[@piotrn2491]

It's hard to figure out how to implement the svg with duotone into the html without deeper explanation.

[@forithall2417]

Exactly what I was thinking.It just poped out of nowhere, with no explanation..

[@smicro6758]

Could you explain how it works I cant figure it out

[@John-yu6to]

Font Awesome has a teensy little Download button when looking at an icon that lets you download the svg code. All Fireship did was format it to be more readable, as well as nesting it into a list tag to make it work with the navbar. Also, he nested a tag between the tagsto include it into a class for the icons. I got it through some minor digging and experimentation.

[@johnchristaph5287]

i found a solution: basically, you just have to download or create an SVG icon file then take its path and read it on any text document apps then get the d stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file

[@LexMadafaka]

@@John-yu6to Still can not find it. Where is that download button which gives you back this kinda code? (like the )

[@jerikgarcia1798]

I got teary eyes coz of your channel champ! what a great uiux tutorial here! thank you!

[@Digital963]

Cool video man. Some beginners might find it an quick so I like that you addressed that in the intro. Also, I really like your teaching style! Thanks for the good content I, as well as others, appreciate it! 🙏🏽

[@Knockusu]

Not sure if you will see this however, I was wondering if you could explain how to change the svg images or whatever, very new to code and cant figure this out

[@Iglum]

Google "font awesome" from there you can grab tons of great svg icons.

[@igorkudryk2199]

@@Iglum but what tag I have to change ? On font awesome I see only ... tags ?

[@rtv694]

somehow the margin-top: auto doesn't work.

[@carol00210]

How amazing is your explanation? I found nothing like it so far! Thank you so much for this amazing content.

[@TP_Raks]

Your voice man...its pure gold 🔥 learning is a breeze when listening to you present the content. Thank you

[@HossamKhalaf-sr1oo]

Can I subscribe more than one time 😂?

[@Fireship]

I'll allow it

[@Scizzzor]

Yeah just click twice

[@HossamKhalaf-sr1oo]

@@Scizzzor 😂😂 won't do that

[@MrKingPlayz]

my .nav-item:last-child set to margin-top: auto; wont make the last item go to the bottom of the nav bar. Is there something else i need to do. I've set the nav-item width to 100% already.

[@xi_red4936]

Yo, same here, did u find a solution?

[@MrKingPlayz]

@@xi_red4936 yo it’s been awhile since I fixed this problem give me like 6-8 hours and I can go back and figure out how I fixed it. Reply to me in like 5 hours so I remember how I fixed that old code.

[@MrKingPlayz]

Sorry for the long delay I work a day job so won’t have access to my project folder until I’m home

[@xi_red4936]

@@MrKingPlayz it's been 6 hours = }

[@DRocksRecords]

That's sick man nice job. Love the simplicity of native html and css +++

[@vm5607]

Damn, that is awesome. This is the first video of you that I have watched. I wonder if you have more of such cool guides

[@luni2566]

i cant use the '--text-primary' someone help me

[@mazwrld]

Are you using it like this? color: var(--text-primary);

[@rand0mtv660]

Did you define it in :root { } selector? And as the other comment mentioned, when using it you have to use var(--var-name). :root { --text-primary: #369; } body { color: var(--text-primary); }

[@EnXsz]

I didn't know how much I miss doing CSS until I saw this, great video!

[@jhoancastillo5778]

OMFG, THIS IS ONE OF THE BEST TUTORIAL I'VE EVER SEEN!!!

[@niyongaboeric]

You made responsiveness, navbar and icons so simple. Awesome @jeff keep it up brother.

[@ahmadkhudai]

Love the tutorial. Learned a lot. Thank you!

[@leandrolagoa]

wow!! Absolutely perfect!! Extremely easy and works well!

[@GirishKumar-gi7ky]

just what I needed and currently working on!

[@soyitiel]

Bruh, I started my project using bootstrap and was very excited thinking that it would improve development but it started to slow me a bit cause I knew nothing about it. I've actually learned a lot reading the docs and watching the live styles on the developers tab, but then I thought if it's taking me so much work and time to learn and adapt to this framework, why not just do it myself? This comes very handy. Thanks. Luv ur vids

[@Yaqins]

To the point yet so thorough. Please do more of this content, you earned a subscriber!

[@Fireship]

Thank you! Welcome to the channel 😁

[@albertdugba]

Thank you so much fireshipio. I used this same this to create a responsive dashboard

[@ligyrophobia]

Wow, i just saw result in the start, and i understand that lesson will be super! Subscribed and liked, keep it going!

[@nathandowner6007]

I definitely love these project focused videos

[@stevencruz978]

Dude you're the man! Pouring so much knowledge into my head in such little time

[@Gotinox]

That navbar is so sick!

[@ttbooster]

Best channel on KZbin. Very relevant and concise !

[@tykemajor9442]

Your work is greatly appreciated

[@mitch7w]

This is amazing, thank you!