CSS Navbar: Create a Beautiful Navigation Bar From Scratch

A step-by-step guide to creating a simple yet beautiful navigation bar from scratch using CSS, from creating a semantic HTML structure for the navigation to picking beautiful gradients and tweaking the design until it feels and works just right.

🔗 Links
Codepen demo: https://codepen.io/ZoranJambor/pen/NWLgoeR
Direction Aware Hover Effect Using :has() Selector: https://youtu.be/gnQPS0hogkE
In-Depth Guide to CSS Logical Properties: https://youtu.be/cV9JhEV4Ll0
Switch to HSL Color Format: https://youtu.be/VInSzHOeFkE
Hypercolor Gradients: https://hypercolor.dev
Contraste: https://contrasteapp.com/

📖 Chapters
00:00 Intro
00:22 Create HTML Structure for Navbar using Emmet
03:40 Select a background gradient for the page
05:17 Switch RGB to HSL color format using Chrome DevTools
06:44 Tweak page styles (font-family, font-size, line-height)
07:45 Style the header element container
09:00 Tweak logo size using Chrome DevTools
09:57 Position the logo next to the navigation bar using flexbox
10:53 Layout menu links one next to another using flexbox
11:07 Tweak menu colors
11:22 Adjust menu spacing and align links properly
16:13 Add hover effect on menu items
19:18 Create the responsive version using media queries
21:34 Adjust responsive version spacing
24:36 Add background to menu item links
27:44 Add gap between logo and navigation menu
28:15 Tweak the responsive version
30:35 Conclusion

Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: https://masteringlinting.com/

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Keep up-to-date with CSS Weekly:
👉 Twitter: https://twitter.com/CSSWeekly
👉 Instagram: https://instagram.com/cssweekly
👉 Facebook: https://www.facebook.com/CSSWeekly/

Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: https://twitter.com/zoranjambor
👉 LinkedIn: https://www.linkedin.com/in/zoranjambor/

- Zoran Jambor
#css #flexbox