I recently saw the thumbnail for Online Tutorial’s video on a magic CSS nav and it really intrigued me. I was curious how they created the design and wanted to try to replicate it myself. That is where this video comes in. This is my first attempt at recreating their design and I am surprised how tricky yet simple the entire process is.


Materials/References:

GitHub Code: https://github.com/WebDevSimplified/css-magic-indicator-nav
Online Tutorials Video: https://youtu.be/ArTVfdHOB-M


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:55 - Basic Navbar
10:59 - Magic Indicator
46:47 - JavaScript
50:43 - Moving The Indicator


#MagicIndicator #WDS #CSSAnimation