Animated Responsive Navbar with CSS - Plus Other Useful Tricks

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

Can someone PLEASE explain to me what exactly is the code in the SVG images and were to get it. I got completely lost in this part and a I just gave up of the project 😢

thank you!!

If you see a scrollbar on the left, go to navbar and set the overflow to hidden.

Way to go player, Im a clever dev, but even I learned alot from this simple CSS tutorial, im very proud of you!

Great and fast, well done.

nah bro this shit too confusing for beginners.

I couldn't get the icons to go to the bottom of the screen 🤨

I am using this to my website 😂

margin-top auto? why not align-self: flex-end?

how to make the icons stay in place when the navbar widens on hovering, like in the video?

Can't get the theme button to work properly. I only want dark and light theme, so I tried altering the source code, but something is off. It might be the SVGs since yours have class, id, aria-hidden, etc but when I try to add those to my SVGs, it doesn't work.

for a second I thought my headphones died when the audio quality tanked at the beginning 💀💀💀💀

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

hey why you turn off the substitle whyyyy

For some reason the nav bar now has a vertical and horizontal scroll bar in my project D:

tried copying line for line.. still ended up with a broken navbar.. traites of a solid programmer

mobile phone pixel density is much higher than 600px so the media query of screen wont work

poor explanation.

poor

Hipster ipsum is the best thing I have learned today

So in the code, it has changed to have a scroll bar on the navigation bar. To fix this, you need to change the overflow in the navbar class to hidden instead of scroll.

Excellent video. Thank you you from a newbie who is working on changing careers.

🔥 ⛴️

nicee video i support what you do

The dude with a 600px screen

how do I change the icons

I tried it and the navbar is in the middle

Amazing video!

Why i can't download this video

Could be done better. By rushing the video you defeat the purpose and just create confusion. Nice idea, but longer and better explanation would be much better.

At 7.42 I don't understand where he uses that color classes, can you help me pls

Thanks a lot, are we free to use it and customize ?

Hello! How do I remove link-text from small width device?

the voice got deeper in 2022

I always wondered why sometimes Fireship's voice sounds a bit higher pitched. Then I realized it's because he speeds up his Voice Overs

Really appreciate your fast speed bro, others treat us like seven years old.

webkit scrollbar is not compatible with firefox

great video man

niced

How is he making the files's logos apear in such a unique way?
For example, his HTML file's logo is this design and in my VSCode is something like thesse two: <>
So...

almost production-ready css

That was amazing bro.

super bacana!! obrigada por compartilhar com a gente.😉

Wow! This is SO COOL! I'm amazed at what CSS allows competent programmers to do!

If you ever second-guess whether your content is digestible for beginners: I am a beginner, and the answer is yes.

hipster ipsum omg

I know this is two years old, but if anyone is still listening, my question is what if I want to use icons I created in photoshop?
They’re png images.
How do I go about doing that?
As a beginner, would that be difficult?