mobile nav update and header padding fixes

Author: myogpatterns

assets/css/main.css

@@ -2238,11 +2238,19 @@ input, select, textarea {
 			flex-direction: column-reverse;
 			padding: 0;
 		}
+
+		#nav ul li {
+			padding: 0;
+		}
 
 		#nav li.links { 
 			display: none;
 		}
 
+		#nav a {
+			padding: 1em;
+		}
+
 		#nav .menu {
 			display: flex;
 			flex-grow: 1;
@@ -4361,10 +4369,8 @@ input, select, textarea {
 
 /* Banner (style4) My Custom Style */
 	.banner.style4 {
-		/* height:20rem; 
-		padding-bottom: 4rem; */
 		height:12rem; 
-		padding-bottom: 2rem;
+		/* padding-bottom: 2rem; */
 		/*padding: 3rem 3.75rem 3rem 3.75rem ;*/
 		-moz-align-items: center;
 		-webkit-align-items: center;
@@ -4477,7 +4483,7 @@ input, select, textarea {
 
 		.banner.style4 {
 			/* padding-bottom: 3rem; */
-			padding-bottom: 1.5rem;
+			/* padding-bottom: 1.5rem; */
 		}
 
 
@@ -4489,7 +4495,7 @@ input, select, textarea {
 
 		.banner.style4 {
 			/* padding-bottom: 3rem ; */
-			padding-bottom: 1.5rem ;
+			/* padding-bottom: 1.5rem ; */
 		}
 
 
@@ -4499,7 +4505,7 @@ input, select, textarea {
 
 		.banner.style4 {
 			/* padding-bottom: 3rem ; */
-			padding-bottom: 1.5rem ;
+			/* padding-bottom: 1.5rem ; */
 		}
 
 

map.html

@@ -54,14 +54,14 @@
         <section class="color8 invert align-center">
             <nav id="nav">
                 <ul >
-                <li class="links"><a href="zerotohero.html">Getting Started</a></li>
-                <li class="links"><a href="index.html">Patterns</a></li>
-                <li class="links"><a href="fabrics.html">Fabrics</a></li>
-                <li class="links"><a href="hardware.html">Hardware</a></li>
-                <li class="links active"><a href="#">MYOG Suppliers</a></li>
-                <li class="menu"><a href="javascript:void(0);" class="icon" onclick="navCollapse()">
-                    <i class="fa fa-bars"></i>
-                  </a></li>
+                    <li class="links"><a href="zerotohero.html">Getting Started</a></li>
+                    <li class="links"><a href="index.html">Patterns</a></li>
+                    <li class="links"><a href="fabrics.html">Fabrics</a></li>
+                    <li class="links"><a href="hardware.html">Hardware</a></li>
+                    <li class="links active"><a href="#">MYOG Suppliers</a></li>
+                    <li class="menu"><a href="javascript:void(0);" class="icon" onclick="navCollapse()">
+                        <i class="fa fa-compass fa-2x"></i>
+                    </a></li>
                 </ul>
             </nav>
         </section>