billfienberg/css-sampler-blog-post

Building a Header for Web on Desktop using Flexbox, Positioning, and Pseudoelements

CSS Sampler: Building a Desktop Header using Flexbox, Positioning, and Pseudoelements

Demos

• Surge
• Codepen
  1. Build a Basic Nav
  2. Add a Fixed Dropdown
  3. Toggle the Dropdown
  4. Add the Triangle

Concepts Covered:

• create-react-app
• Flexbox
• position: relative and position: absolute
• CSS Triangle using :before and :after pseudoelements