LOADING ...

Animated Responsive Navbar Tutorial

126K+ views   |   5K+ likes   |   62 dislikes   |  
22:10   |   Mar 27, 2019

Thumbs

Animated Responsive Navbar Tutorial
Animated Responsive Navbar Tutorial thumb Animated Responsive Navbar Tutorial thumb Animated Responsive Navbar Tutorial thumb

Description

Today we are going to create an animated responsive navbar with html css and javascript. We are going to use flexbox to structure our navbar and css media queries to toggle the burger menu from desktop to mobile.

Rather than having a typical slide out navbar we are going to implement an expanding circle animation using clip-path.

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

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed

Things covered in this video:

- How to create a responsive navbar
- Adding animation using clip-path
- Using CSS media queries

Materials used in this video:

Starter Files: https://github.com/DevEdwin/navbar-circle-animation

Follow me on:

Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin

Music:

Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0
http://creativecommons.org/licenses/b...

Trending videos