this ones for you big daddy dhaynes

src/app/app.component.scss

 .app-container{
+    position: relative;
     height:100%;
     width:100%;
 }

src/app/nav-bar/_collapsed-nav.scss

 
 .small-nav-background {
-	position:absolute;
+	// position:absolute;
 	top:0;
 	width: 100%;
 	height: 95px;
 	// background-color: #006633;
-	z-index:1000;
 }
 
 .small-logo {
@@ -75,7 +74,7 @@
 	border-radius: 50px;
 	opacity: 0.9;
 	font-family: NunitoSans-Regular;
-	font-size: 12px;
+	font-size: 13px;
 	color: #FFFFFF;
 	text-align: center;
 	vertical-align: middle;

src/app/nav-bar/_expanded-nav.scss

@@ -3,10 +3,10 @@
 	width: 100%;
 	top: 0px;
 	left: 0px;
-	height: 400px;
+	height: 55%;
 	background: #ffffff;
 	box-shadow: 0px 8px 20px 0px $shadow-color;
-
+	z-index: 500;
 	&:before {
 		content: "";
 		background: url("../../assets/pattern.png") repeat;

src/app/nav-bar/nav-bar.component.scss

@@ -28,3 +28,11 @@
 	box-shadow: inset 0px 0px 20px 0px $shadow-color;
 	z-index: 10001;
 }
+.filler-container{
+	width:100%;
+	height:80px;
+	z-index: -10;
+}
+.nav-bars-container{
+	
+}
\ No newline at end of file

src/app/nav-bar/nav-bar.component.ts

@@ -14,25 +14,25 @@ import {
 	animations: [
 		trigger('toggle-large-bar', [
 			state('expanded', style({
-				transform: 'translateY(0px)'
+				transform: 'translateY(0px)',
+				zIndex: '1'
 			})),
 			state('collapsed', style({
-				transform: 'translateY(-400px)'
+				transform: 'translateY(-400px)',
+				zIndex: '1000'
 			})),
-			transition('expanded => collapsed', animate('300ms cubic-bezier(.35,0,.61,1)')),
-			transition('collapsed => expanded', animate('300ms ease-in-out'))
+			transition('expanded => collapsed', animate('250ms cubic-bezier(.35,0,.61,1)')),
+			transition('collapsed => expanded', animate('250ms ease-in-out'))
 		]),
 		trigger('toggle-small-bar', [
 			state('expanded', style({
-				backgroundColor: 'transparent',
-				zIndex: '1'
+				backgroundColor: 'transparent'
 			})),
 			state('collapsed', style({
-				backgroundColor: '#006633',
-				zIndex: '0'
+				backgroundColor: '#006633'
 			})),
-			transition('expanded => collapsed', animate('250ms 270ms ease-out')),
-			transition('collapsed => expanded', animate('300ms ease-out'))
+			transition('expanded => collapsed', animate('250ms 250ms ease-out')),
+			transition('collapsed => expanded', animate('250ms ease-out'))
 		]),
 		trigger('toggle-links', [
 			state('expanded', style({
@@ -51,9 +51,9 @@ import {
 				opacity: '0'
 			})),
 			state('collapsed', style({
-				opacity: '1'
+				opacity: '100'
 			})),
-			transition('expanded => collapsed', animate('150ms ease-out')),
+			transition('expanded => collapsed', animate('150ms 100ms ease-out')),
 			transition('collapsed => expanded', animate('150ms ease-out'))
 		])