From 02ad986c39d4ae4df126bf2f1319bbe7a5ad66de Mon Sep 17 00:00:00 2001
From: Alex <reyesgx@gmail.om>
Date: Wed, 26 Sep 2018 19:21:14 -0700
Subject: [PATCH 1/2] nav-bar semi responsive

---
 src/pages/wizard/wizard.html | 27 ++++++++++++++++-----------
 src/pages/wizard/wizard.scss | 25 +++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/pages/wizard/wizard.html b/src/pages/wizard/wizard.html
index d6555bae..40dbefd5 100644
--- a/src/pages/wizard/wizard.html
+++ b/src/pages/wizard/wizard.html
@@ -13,12 +13,17 @@
   </ion-navbar>
 </ion-header>
 
-
 <ion-content >
+  <div class="nav-start">
+    <button ion-button class="start">Exit</button>
+    <button ion-button class="start">Back</button>
+
+    <button ion-button id="end">Start</button>
+  </div>
   <ion-slides pager>
     <ion-slide  >
       <div class='top'>
-      <h1>Welcome</h1>
+        <h1>Welcome</h1>
         <p> InTranshition is an app designed for Veterans to transition into the civial environment.
             This wizard will guide you through the app <br><br>
            <strong> Scroll to the right to begin.</strong>
@@ -26,19 +31,19 @@ <h1>Welcome</h1>
       </div>
     </ion-slide>
     <ion-slide>
-        <div class='top'>
-      <h1>Home Dasboard</h1>
+      <div class='top'>
+        <h1>Home Dasboard</h1>
       
-      <p>Here you will find links to the timeline and self assessment section.<br><br>
-      Usefull tips and links are also available to check out. </p>
-      <img id='dashImg' src='../../assets/imgs/dashboard.png'>
-        </div>
+        <p>Here you will find links to the timeline and self assessment section.<br><br>
+            Usefull tips and links are also available to check out. </p>
+        <img id='dashImg' src='../../assets/imgs/dashboard.png'>
+      </div>
     </ion-slide>
     <ion-slide>
         <div class='top'>
-            <h1>Self Assessment</h1>
-            <p>Here you will be promted to take your self assessment to assess your finances, relationships, family, and more!</p>
-            <img id="self" src='../../assets/imgs/asssesment.png'>
+          <h1>Self Assessment</h1>
+          <p>Here you will be promted to take your self assessment to assess your finances, relationships, family, and more!</p>
+          <img id="self" src='../../assets/imgs/asssesment.png'>
       </div>
     </ion-slide>
     <ion-slide>
diff --git a/src/pages/wizard/wizard.scss b/src/pages/wizard/wizard.scss
index 8450a317..d5dbf3f9 100644
--- a/src/pages/wizard/wizard.scss
+++ b/src/pages/wizard/wizard.scss
@@ -5,6 +5,31 @@ page-wizard {
       ion-slide.swiper-slide {
         align-items: flex-start;
     }
+    .nav-start {
+        position: fixed;
+       // top: 10%;
+       // display: position;
+        background-color: rgb(26, 39, 71);
+        width: 100%;
+        z-index: 2;
+        height: 5.2%;
+    }
+   
+    .start {
+        height: 85%;
+        //float:left;
+        color: black;
+        //margin: auto;
+        background-color: aliceblue;
+    }
+    #end {
+        //margin: auto;
+        height: 85%;
+        float:right;
+        color: black;
+        background-color: aliceblue;
+    }
+
     .top {
         position: relative;
         display: block;

From 4364c73aced8432dde015aa875d4f2f7fb253d73 Mon Sep 17 00:00:00 2001
From: Alex <reyesgx@gmail.om>
Date: Wed, 26 Sep 2018 19:55:56 -0700
Subject: [PATCH 2/2] working and resposive nav bar, changed color

---
 src/pages/wizard/wizard.scss | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/pages/wizard/wizard.scss b/src/pages/wizard/wizard.scss
index d5dbf3f9..2c44562e 100644
--- a/src/pages/wizard/wizard.scss
+++ b/src/pages/wizard/wizard.scss
@@ -1,29 +1,31 @@
 page-wizard {
     ion-slide {
-        background-color: rgb(117, 197, 74);
+        background-color: rgb(188, 208, 226);
       }
       ion-slide.swiper-slide {
         align-items: flex-start;
     }
     .nav-start {
         position: fixed;
-       // top: 10%;
-       // display: position;
         background-color: rgb(26, 39, 71);
         width: 100%;
         z-index: 2;
         height: 5.2%;
+       // margin-top: .5px;
     }
    
     .start {
+        font-size:2.5vw ;
         height: 85%;
-        //float:left;
         color: black;
-        //margin: auto;
         background-color: aliceblue;
+        width: 10vw;
+        min-width: 65px;
     }
     #end {
-        //margin: auto;
+        font-size:2.5vw ;
+        min-width: 65px;
+        width: 10vw;
         height: 85%;
         float:right;
         color: black;
@@ -34,7 +36,7 @@ page-wizard {
         position: relative;
         display: block;
         width: 70%;
-        margin: auto;
+        margin: 10vw auto 0px auto;
         font-size: 22px;
         top: 20px;
     }