Added new nav for mobile

dabit3 · dabit3 · commit 152a4cac6107 · 2014-11-06T20:52:31.000-06:00
diff --git a/css/style.css b/css/style.css
@@ -28,6 +28,10 @@ margin: 0 auto;
 margin-top: 160px;
 }
 
+.heading-image {
+	width:700px;
+}
+
 .navleft h3 {
 	font-weight: 100;
 background: rgba(0,0,0,.1);
@@ -179,7 +183,7 @@ line-height: 60px;
 
 .third-container {
 	background:#ffffff;
-	box-shadow: inset 0px 0px 4px rgba(0,0,0,.3);
+	box-shadow: inset 0px 2px 4px rgba(0,0,0,.2);
 }
 
 .third-container-3 {
@@ -220,7 +224,7 @@ padding-top: 15px
 
 .fourth-container-wrapper {
 	background:#DBDEDD;
-	box-shadow: inset 0px 0px 4px rgba(0,0,0,.3);
+	box-shadow:inset 0px 1px 2px rgba(0,0,0,.2);
 }
 
 .fourth-container {
@@ -355,11 +359,77 @@ footer {
 	clear:both;
 }
 
+/* Mobile Only */
+
+.mobilenav {
+	display: none;
+	position: fixed;
+z-index: 20;
+background:rgba(0,0,0,.6);
+width:100%;
+
+}
+
+.mobile-hamburger {
+	float:left;
+	margin:0;
+	width:35px;
+	padding:12px;
+	background:#000000;
+}
+
+.mobile-hamburger:hover  {
+	cursor:pointer;
+}
+
+.mobile-burger-image {
+	width:35px;
+}
+
+.mobile-logo {
+	float:left;
+	margin:0;
+	font-weight: 100;
+	color:#ffffff;
+	margin-top: 10px;
+	margin-left: 20px;
+}
+
+
+.mobile-navicon {
+	float: left;
+	margin:0;
+}
+
 /* Media Queries */
 
-@media only screen and (min-width: 600px) and (max-width: 900px) {
+@media only screen and (min-width: 0px) and (max-width: 900px) {
+
+.mobilenav {
+	display: block;
+}
+
+.heading-image {
+	max-width: 100%;
+}
+
+nav {
+	display: none;
+}
+
+
+}
+
+
+@media only screen and (min-width: 0px) and (max-width: 700px) {
 
- }
+.heading {
+	width:100%;
+}
+
+
+
+}
 
 
 
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 	<meta charset="UTF-8">
 	<title>{ JAWAD }</title>
 	<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic' rel='stylesheet' type='text/css'>
@@ -9,6 +10,13 @@
 	<link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+
+<div class="mobilenav">
+	<div class="mobile-nav-container">
+		<h2 class="mobile-hamburger" id="mobile-hamburger"><img class="mobile-burger-image" src="images/nav.png" alt=""></h2><h1 class="mobile-logo">JAWAD</h1>
+	</div>
+</div>
+
 <div class="navfixed">
 	<div class="leftnav">
 		<section class="navleft">
@@ -31,7 +39,7 @@ <h3 class="usefullinks">USEFUL LINKS</h3>
 				</div>
 			</div>
 			<div class="heading">
-				<img width="700px" src="images/headline.png" alt="">
+				<img class="heading-image" src="images/headline.png" alt="Jackson Area Web &amp; App Developers">
 			</div>
 		</section>
 	</div>
