Uploaded March 2023 | Updated September 2026, 1 hour ago
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: codepen.io/ZoranJambor/pen/NWLgoeR
Direction Aware Hover Effect Using :has() Selector: youtu.be/gnQPS0hogkE
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Switch to HSL Color Format: youtu.be/VInSzHOeFkE
Hypercolor Gradients: https://hypercolor.dev
Contraste: 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: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #flexbox
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: codepen.io/ZoranJambor/pen/NWLgoeR
Direction Aware Hover Effect Using :has() Selector: youtu.be/gnQPS0hogkE
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Switch to HSL Color Format: youtu.be/VInSzHOeFkE
Hypercolor Gradients: https://hypercolor.dev
Contraste: 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: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #flexbox
