Animated Responsive Navbar with Mobile Mega Menu Tutorial - (SCSS)

Channel:

codeSTACKr

Subscribers:

296,000

Published on October 2, 2019 11:00:17 AM ● Video Link: https://www.youtube.com/watch?v=mEtmJ2xk16g

Category:

Tutorial

Duration: 53:03

40,759 views

1,046

👉 Become A VS Code SuperHero Today: https://vsCodeHero.com

In this video, we are going to create an animated responsive navbar with HTML, SCSS / CSS, and a few lines of JavaScript. I've included lots of extra tips and tricks throughout the video! So don't miss a minute!!

We are going to use CSS FlexBox to structure our navbar and CSS media queries to toggle the burger menu from desktop to mobile. The mobile view will feature a mega menu. The only reason that JavaScript is needed is so that on scroll the header can transition to having a background. Aside from that the rest of the code is completely CSS.

We will implement several animations, some using keyframes and others using transitions. One of the transitions will use clip-path to expand the menu with a circle animation.

If you are interested in learning/creating a responsive navbar then I highly recommend you download the starter files bellow.
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #CSS #learntocode