make your navigation work with one line of css video
Key Takeaways
Using CSS to create a responsive navigation bar with flexbox and flex wrap, eliminating the need for complex media queries and hamburger menus.
Full Transcript
going back to this idea of the navigation do you really need that complex version of your navigation on you know do we need it to be hidden off screen with a hamburger menu that we the user has to interact with that then slides out and it has its own styling going on and all of that or could I just take that nice display Flex put a gap on it and then add just a flex wrap of wrap so as the screen gets smaller if those navigation links run out of room they just wrap down onto a new line by doing it that way we've managed to make the navigation work at all screen sizes with a one extra line of CSS and it just works we don't need any media queries or anything like that and the cool thing with this is it doesn't matter when it starts to wrap when we're using media queries we have to figure out what break points we're going to use and that's something people are always asking me what breakpoint should I use for this thing that I'm creating and it really depends right but if we don't have to worry about breakpoint
Original Description
My primary YouTube channel where I teach frontend development, with a strong focus on CSS: https://youtube.com/@kevinpowell
✉ The written version of my newsletter: https://www.kevinpowell.co/newsletter
💬 Come hang out with other dev's in my Discord Community: https://discord.gg/nTYCvrK
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
Playlist
Uploads from General Musings with Kevin Powell · General Musings with Kevin Powell · 14 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
▶
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Intrinsic Web Design
General Musings with Kevin Powell
When you feel like you're losing motivation
General Musings with Kevin Powell
Are you sure you want to freelance?
General Musings with Kevin Powell
How I use Notion to help stay on task
General Musings with Kevin Powell
The problem with learning roadmaps
General Musings with Kevin Powell
My curse
General Musings with Kevin Powell
The CSS Mindset
General Musings with Kevin Powell
My simple technique for a better work/life balance
General Musings with Kevin Powell
Grids auto-fit syntax is weird at first but its amazing
General Musings with Kevin Powell
When you don’t know where to start
General Musings with Kevin Powell
Making the browser do the work for us
General Musings with Kevin Powell
Why mobile-first isn't always best
General Musings with Kevin Powell
The problem with following tutorials
General Musings with Kevin Powell
make your navigation work with one line of css video
General Musings with Kevin Powell
Am I cursed?
General Musings with Kevin Powell
Keeping up momentum with self-paced learning
General Musings with Kevin Powell
Understanding vs Knowing how to do something
General Musings with Kevin Powell
Supercharge your learning
General Musings with Kevin Powell
Supercharge your learning
General Musings with Kevin Powell
Why is CSS so frustrating for so many people?
General Musings with Kevin Powell
How people's struggles with CSS evolve over time
General Musings with Kevin Powell
How do you know you're ready to start applying for jobs?
General Musings with Kevin Powell
Is 54 units too many units, or not enough?
General Musings with Kevin Powell
Two important dev skills that don’t get enough attention
General Musings with Kevin Powell
It took me 6 years to realize I had a great idea
General Musings with Kevin Powell
Don't rely on this non-existent optimization
General Musings with Kevin Powell
Quick one as we head into the holidays!
General Musings with Kevin Powell
Taking a short break
General Musings with Kevin Powell
Is HTML the easiest, or hardest, to get right?
General Musings with Kevin Powell
How teaching helped me become a better developer
General Musings with Kevin Powell
Answering your questions - Mailbag episode
General Musings with Kevin Powell
A conversation with Una Kravets: The rapid evolution of CSS and hobbies outside of work
General Musings with Kevin Powell
It's easy to get stuck in our ways
General Musings with Kevin Powell
How much browser support is enough?
General Musings with Kevin Powell
A conversation with the person who inspired my channel, Travis Neilson
General Musings with Kevin Powell
I felt like I was taking a step backward
General Musings with Kevin Powell
A conversation with Clark Sell
General Musings with Kevin Powell
The slow adoption of new CSS features
General Musings with Kevin Powell
Why does CSS keep getting more complex?
General Musings with Kevin Powell
I hate that people say stuff like this...
General Musings with Kevin Powell
Why You Should Learn CSS Grid Before Flexbox
General Musings with Kevin Powell
Don't overthink it
General Musings with Kevin Powell
Why competition is a good thing
General Musings with Kevin Powell
ADHD as a dev can be a blessing (or a curse!)
General Musings with Kevin Powell
ADHD can help developers be more creative
General Musings with Kevin Powell
Gain inertia with very small easy tasks
General Musings with Kevin Powell
Dev work might be the best job for someone with ADHD
General Musings with Kevin Powell
You don't need to be hyper to have ADHD
General Musings with Kevin Powell
Navigating ADHD as a developer
General Musings with Kevin Powell
Nerding out about CSS with Adam Argyle
General Musings with Kevin Powell
Is productivity a lie?
General Musings with Kevin Powell
So much new CSS stuff! How can we keep up?!
General Musings with Kevin Powell
Selective learning
General Musings with Kevin Powell
Should you use AI to help you learn?
General Musings with Kevin Powell
Navigating Accessibility Challenges in Web Development
General Musings with Kevin Powell
Teaching Front-end, making sense of CSS, and more with Josh Comeau
General Musings with Kevin Powell
Getting more involved with CSS with Miriam Suzanne
General Musings with Kevin Powell
The Unplanned Path: Finding Passion in Teaching and CSS
General Musings with Kevin Powell
Navigating CSS Layout Decisions
General Musings with Kevin Powell
The future of CSS layouts: a new unified approach
General Musings with Kevin Powell
More on: HTML & CSS
View skill →Related Reads
📰
📰
📰
📰
Stop installing giant icon packages — write SVGs as source with a CLI + MCP
Dev.to · arialus
Frontend Engineers Are Quietly Becoming the New Overhead.
Medium · AI
Building an Interactive Fashion Hero with HTML, CSS & GSAP
Dev.to AI
Out-of-Order HTML Streaming Moves from JS Frameworks into the Browser
InfoQ AI/ML
🎓
Tutor Explanation
DeepCamp AI