The goal of this project is to develop my skills at creating responsive navbars from scratch. This is always something that I have been fascinated with learning but have always struggled to figure out. Each time I come to the point of building a navbar in a project, I can't seem to get it right and I want to change that. In this project, I will design and build unique navbars to build my skills at creating mobile-first, responsive navbars.
Sept 8, 2019
I am starting with a simple - non collapsable nav bar just to get practice positioning the
elements. I will use flexbox to place all of my components. This nav is designed for a simple
site with smaller navigation needs. It will be responsive for each screen size.
Sept 9, 2019
My second navbar is collapsed up until a display of 768px has been hit. This nav uses an
animation on the toggle button to make an X while the collapsed nav is open. The collapsed
nav also takes up the entirity of the screen while it is open. When the screen size passes
768px, then the nav uses flexbox to stretch across the screen at all times.
Sept 12, 2019
My third navbar is collapsed up until a display of 1200px has been hit. This navbar enters
the screen from the top of the page and uses a transition: transformY to move it in and out
of the viewport. When the screen size passes 1200px, then the nav uses flexbox to stretch
across the screen at all times.