Changed the mobile nav menu so that it wouldn't cause problems with page layout

static/css/style.css

@@ -90,6 +90,11 @@ input[type='submit'] {
 	text-decoration:none;
 }
 
+#menu-container {
+	overflow-x: hidden;
+	display: inline;
+}
+
 .main-nav ul {
 	float:right;
 	margin-top:-5px;
@@ -492,16 +497,16 @@ a.social-link:hover, a.social-link:active {
 	}
 
 	#menu {
-		display:block;
+		display:none;
-		width:100vw;
+		opacity:0;
+		width:100%;
 		position: absolute;
 		top: 60px;
-		left: 100%;
 		padding:0;
 		background-color:#002900;
 		float:none;
-		-webkit-transition: left 0.5s ease;
+		-webkit-transition: opacity 0.5s ease;
-		transition: left 0.5s ease;
+		transition: opacity 0.5s ease;
 	}
 
 	#menu-icon {

templates/master.html

@@ -30,6 +30,7 @@
 	    <nav class="main-nav">
    	    <h1><a href="/">william brawner</a></h1>
    	    <a href="javascript:void(0)" id="menu-icon"><i class="fa fa-bars "></i></a>
+        <div id="menu-container">
             <ul id="menu">
                     {% if session.logged_in and session.admin %}
                     <li>
@@ -53,6 +54,7 @@
     			<a href="{{ url_for('contact')  }}">contact</a>
     		    </li>
     		</ul>
+        </div>
 	    </nav>
         <div class="container">
             <div class="content">
@@ -83,11 +85,17 @@
 	        var menuVisible = false;
 	        $('#menu-icon').click(function() {
 	            if (menuVisible) {
-	                $('#menu').css({'left':'100%'});
+                    $('#menu').css({'opacity':'0'});
+                    setTimeout(function() {
+                        $('#menu').css({'display':'none'});
+                        }, 500);
 	                menuVisible = false;
 	                return;
 	            }
-	            $('#menu').css({'left':'0'});
+                $('#menu').css({'display':'block'});
+                setTimeout(function() {
+                    $('#menu').css({'opacity':'1'});
+                        }, 100);
 	            menuVisible = true;
 	        });
 	    });