Animated Responsive Navbar with CSS - Plus Other Useful Tricks
ฝัง
- เผยแพร่เมื่อ 27 ก.พ. 2020
- 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 - วิทยาศาสตร์และเทคโนโลยี
"I've got a fever and the only prescription is more Fireship!"
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.
I literally have a fever right now and I’m binging fireship
@@benjaminjameswaller thats like totally fine atleast u r watching something productive
You had me at, "you don't need Bootstrap"
Bootstrap is excellent
Bootstrap is great for a simple layout but you can't really style anything except for colour changes.
@@kongenerkasper what? You can practically style anything
@@secretaryofstate1 Yeah but why bring in a bloated styling library when you can make it yourself with more flexibility and control?
@@Justin73791 it’s not bloated ? But if that’s how you feel that’s fine .. we can have different views on that
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.
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! ;)
Amazing content!
One of the few people that actually explain the "why" not just the "what".
Your videos are absolutely amazing!
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.
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.
PLEASEEEEEE MAKE THISSSS KINDAAAAA CONTENT MORE!!!!!❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
Also please tell us the trick that you use to paste the code in your tutorials...like it's super awesome...
@@abhinav.sharma It's just a simple delete in reverse, then ctrl+Z
I thought so...but then I was like...maybe there'd be another way...
Anyway...you just sync it soooo well man...
Yeah dude, this kind of things gets you instant subscribers.
One of the cleanest, straight to the poiny and best tutorials Ive seen so far.
I like this style of videos a lot!
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.
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.
+1
++1
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.
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!
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 🥰
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
I'm so glad I found a channel with such an amazing content
Thank you! Welcome to the channel :)
I have never learned more CSS from any video before. This was amazing! Thanks :)
it is actually very nice to see you do more css content for the moment before switching back to javascript.
Great content!
I am so grateful to Fireship and Jeff the ultimate Captain Frontend ❤
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!
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{}
bro u are a saviour, I spent almost an hour trying to edit the icons. Thanks a mill
Thanks for the last one I couldn't figure out what was causing the icons expanding with the navbar
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
Perfect! Thank you very much :)
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!
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!
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 ❤️
Boarding fireSHIP is awesome. Thanks captain for such a quality content. 🔥🔥🔥
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!
-"You don't need bootsrap"
Me: hold up that's illegal
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.
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.
I've had this on my 'to try' list for ages and finally did it today. Such a great tutorial. Thank you!
New to the channel. Amazing content brother!
Welcome 🍰 and thank you!
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.
I like that idea! There are plenty of ways to might improve the current demo.
I love how this video came out right when I needed it
I learned more CSS in this video then I did in my last internship. Great stuff!
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!
I very rarely comment on videos on TH-cam, but this one is really amazing, thanks a lot!
This is simple to follow at straight to the point. I love it
the way you explained it in the beginning! thank you!! more like this pls 👏
My Zeus, this is the most amazing channel ever! Every wanna-be Web Dev's dream!!!
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.
Thank you! margin:auto is super useful in flexbox.
@@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?
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!
I didn't know how much I miss doing CSS until I saw this, great video!
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! :)
CSS grid over bootstrap
@@raknos13 anything is better than bootstrap
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
already great:
- "Let's push it further."
me:
(silent open mouth)
🤣
That navbar is so sick!
REALLY THIS IS AWESOME!!
You made my day.
I was looking for something like this video that fits every thing I need together.
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.
Set overflow to none
@@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??
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~
OMFG, THIS IS ONE OF THE BEST TUTORIAL I'VE EVER SEEN!!!
I found this in my recommend just subbed! Amazing content!
My new favorite channel. Looking forward to more content.
Ps, audio at start and end is a bit scuffed
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!
Thank you! Interesting suggestion, I've considering doing some algorithm implementations in JS.
@@Fireship have you done it yet?
just what I needed and currently working on!
I got teary eyes coz of your channel champ! what a great uiux tutorial here! thank you!
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)
Thank you!
Thank you :D You should make a pull request on his github
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?
I am waiting for this video for a long time at last you released it. Thank You!
I think comfortably I can say I met a Guru on HTML & CSS. Hats off man!!! Thank you so much!
Could you please do a tutorial on svg? I'm so lost trying to add my own icons
stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file
Amazing video, do git in 100 seconds
That is on the list, I want to do a whole collection of git in 100s videos.
@@Fireship Good thinking, git deserves many videos with advanced features.
Done th-cam.com/video/hwP7WQkmECE/w-d-xo.html
@@Fireship
Hi!
How to make your navbar in your website
@@evan.5967 you can look at the source
Thank you for taking the time to explain each of the elements you used; great video!
I definitely love these project focused videos
It's hard to figure out how to implement the svg with duotone into the html without deeper explanation.
Exactly what I was thinking.It just poped out of nowhere, with no explanation..
Could you explain how it works I cant figure it out
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.
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
@@John-yu6to Still can not find it. Where is that download button which gives you back this kinda code? (like the )
Watching old Fireship videos: "Comment and maybe win a free shirt"
Me: "Find the latest video to try to get free tshirt"
This makes so so much sense and can relate to it so so much
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! :)
How did you use the svg font awesome inline icons? When I go on their page there is only the option...
I had the same problem
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 .
@@gustavomoraes4199 eu te amo
@@gustavomoraes4199 Thanks for your answer but I can speak only english?
@@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.
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
Google "font awesome" from there you can grab tons of great svg icons.
@@Iglum but what tag I have to change ? On font awesome I see only ... tags ?
To the point yet so thorough. Please do more of this content, you earned a subscriber!
Thank you! Welcome to the channel 😁
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!
somehow the margin-top: auto doesn't work.
IMPORTANT:
::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).
Love the tutorial. Learned a lot. Thank you!
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.
Thanks for this great tutorial. Definitely great for more advanced users but straight to the point and filled with great hints. Thanks
i cant use the '--text-primary'
someone help me
Are you using it like this? color: var(--text-primary);
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);
}
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.
Yo, same here, did u find a solution?
@@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.
Sorry for the long delay I work a day job so won’t have access to my project folder until I’m home
@@MrKingPlayz it's been 6 hours = }
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!!
I know how to do all these things, so I'll pass this one around and wait for the Electron + Svelte app tutorial patiently. :)
Expect more electron next week!
@@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 :)
Can I subscribe more than one time 😂?
I'll allow it
Yeah just click twice
@@Scizzzor 😂😂 won't do that
Dude, please make more videos like this! Perfect didactic
This is amazing, thank you!
.nav-item:last-child { margin-top: auto; } 🎉
didn't work for me somehow :(
@@davidmotz8963 make sure you have `height: 100vh; display: flex; flex-direction: column;` applied on the nav-item's container element ;)
@@sten6160 Thanks. I was also having same problem. Solved now!
@@sten6160 thank you thank you thank you :D
@@sten6160 Thank you, this wasn't clear in the video
I just discovered this channel and I'm so happy :'D Thank you for this amazing tutorial!!
How amazing is your explanation? I found nothing like it so far! Thank you so much for this amazing content.
Your work is greatly appreciated
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
Thank you so much fireshipio. I used this same this to create a responsive dashboard
Need more project oriented tutorial videos like this @Fireship
wow!! Absolutely perfect!! Extremely easy and works well!
Man! This is quality content dude! Subscribed (without even seeing other videos)
That's sick man nice job. Love the simplicity of native html and css +++
This is amazing. Thank you for the great content, brother!
Wow! Awesome video thank you!
Thanks for another great upload man! thank you so much!
I remember when this channel was angular firebase. This guy is the reason I wanted to be a web developer. Great content Jeff 👍
That was amazing! Thank you 👌🏼
Dude you're the man! Pouring so much knowledge into my head in such little time
Awesome! Thanks!