Animated Responsive Navbar with CSS - Plus Other Useful Tricks
HTML-код
- Опубликовано: 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
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.
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! ;)
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 :)
One of the cleanest, straight to the poiny and best tutorials Ive seen so far.
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.
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.
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.
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.
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.
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!
-"You don't need bootsrap"
Me: hold up that's illegal
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.
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!
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 ❤️
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!
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 🥰
it is actually very nice to see you do more css content for the moment before switching back to javascript.
Great content!
I have never learned more CSS from any video before. This was amazing! Thanks :)
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.
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!
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
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
I like this style of videos a lot!
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!
I've had this on my 'to try' list for ages and finally did it today. Such a great tutorial. Thank you!
Boarding fireSHIP is awesome. Thanks captain for such a quality content. 🔥🔥🔥
I'm so glad I found a channel with such an amazing content
Thank you! Welcome to the channel :)
the way you explained it in the beginning! thank you!! more like this pls 👏
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! :)
I am so grateful to Fireship and Jeff the ultimate Captain Frontend ❤
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.
This is simple to follow at straight to the point. I love it
Thank you for taking the time to explain each of the elements you used; great video!
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!
My new favorite channel. Looking forward to more content.
Ps, audio at start and end is a bit scuffed
I very rarely comment on videos on RUclips, but this one is really amazing, thanks a lot!
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
I learned more CSS in this video then I did in my last internship. Great stuff!
Thanks for this great tutorial. Definitely great for more advanced users but straight to the point and filled with great hints. Thanks
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?
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?
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!
REALLY THIS IS AWESOME!!
You made my day.
I was looking for something like this video that fits every thing I need together.
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?
New to the channel. Amazing content brother!
Welcome 🍰 and thank you!
Your voice man...its pure gold 🔥 learning is a breeze when listening to you present the content. Thank you
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!
My Zeus, this is the most amazing channel ever! Every wanna-be Web Dev's dream!!!
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~
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!!
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!
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
already great:
- "Let's push it further."
me:
(silent open mouth)
🤣
How amazing is your explanation? I found nothing like it so far! Thank you so much for this amazing content.
I just discovered this channel and I'm so happy :'D Thank you for this amazing tutorial!!
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??
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 ruclips.net/video/hwP7WQkmECE/видео.html
@@Fireship
Hi!
How to make your navbar in your website
@@evan.5967 you can look at the source
I got teary eyes coz of your channel champ! what a great uiux tutorial here! thank you!
I didn't know how much I miss doing CSS until I saw this, great video!
somehow the margin-top: auto doesn't work.
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
Simple, to the point, focus, and complete explanation.. great channel.. really
To the point yet so thorough. Please do more of this content, you earned a subscriber!
Thank you! Welcome to the channel 😁
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.
IMPORTANT:
::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).
I liked how your explanation is very summarized and ordered.
Thanks.
Hopefully you make another quick tutorial for how to have nice dropdown menus and mega menus without using bootstrap.
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! 🙏🏽
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"
I think comfortably I can say I met a Guru on HTML & CSS. Hats off man!!! Thank you so much!
I love how this video came out right when I needed it
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 :)
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 ?
Was just wandering along to see some nav tutorials.
When I saw it till 3:00 immediately subbed Fireship.
Awesomeeee!!!!
just what I needed and currently working on!
.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 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);
}
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
One of the best-explained video tutorials about navbar! Amazing ✨
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 = }
Can I subscribe more than one time 😂?
I'll allow it
Yeah just click twice
@@Scizzzor 😂😂 won't do that
Thank you so much fireshipio. I used this same this to create a responsive dashboard
OMFG, THIS IS ONE OF THE BEST TUTORIAL I'VE EVER SEEN!!!
You made responsiveness, navbar and icons so simple. Awesome @jeff keep it up brother.
Man! This is quality content dude! Subscribed (without even seeing other videos)
Need more project oriented tutorial videos like this @Fireship
Thank you for teaching us sir, I just subs and clicked the notification Bell for the first time, ur so insane , I think this a pro tutorial
Dude you're the man! Pouring so much knowledge into my head in such little time
Wow, i just saw result in the start, and i understand that lesson will be super!
Subscribed and liked, keep it going!
I remember when this channel was angular firebase. This guy is the reason I wanted to be a web developer. Great content Jeff 👍
Sir you just answered a question that I was having trouble with for a while now. Redesigning the scroll bar. Thank you so much.
Excellent video. Thank you you from a newbie who is working on changing careers.
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
I found this in my recommend just subbed! Amazing content!
That's sick man nice job. Love the simplicity of native html and css +++
Love the tutorial. Learned a lot. Thank you!
Amazing.. A video tutorial what I'm looking. Less talk more technical content I wish to say thanks in person. Love you. Thanks a lot.