diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 5a59acd..08fc1d6 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,30 +1,33 @@
 		<header class="header">
 			<input class="menu-btn" type="checkbox" id="menu-btn" />
+			
 			<ul class="menu" >
 				<li>
-				<a href="/" class="logo" >{{ .Site.Title }}</a>
-			<label class="menu-icon" for="menu-btn">
-
-<div class="hamburger" onclick="myFunction(this)">
-  <div class="bar1"></div>
-  <div class="bar2"></div>
-  <div class="bar3"></div>
-</div>
-
-<script>
-function myFunction(x) {
-  x.classList.toggle("change");
-}
-</script>
-			</label>
-
-					
-					<span class="menu-entries">
-					<a href="/" class="home-link" >Home</a>
-       					{{ range.Site.Menus.main }}
-						<a href="{{ .URL }}">{{ .Name }}</a>
-					{{ end }}
-					</span>
+					<a href="/" class="logo" >{{ .Site.Title }}</a>
 				</li>
+				<li>
+					<label class="menu-icon" for="menu-btn">
+						<div class="hamburger" onclick="myFunction(this)">
+							<div class="bar1"></div>
+							<div class="bar2"></div>
+							<div class="bar3"></div>
+						</div>
+						<script>
+							function myFunction(x) {
+								x.classList.toggle("change");
+							}
+							</script>
+					</label>
+				</li>
+
+				<li>
+					<ul class="menu-entries">
+						<li><a href="/" class="home-link" >Home</a> </li>
+       			{{ range.Site.Menus.main }}
+						<li><a href="{{ .URL }}">{{ .Name }}</a></li>
+						{{ end }}
+					</ul>
+				</li>
+
 			</ul>
 		</header>
diff --git a/static/css/style.css b/static/css/style.css
index 85433a0..74325bf 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -40,10 +40,13 @@ a{
 	display: none;
 }
 
+.menu-entries a{
+	transition: 400ms;
+}
+
 .menu-entries a:hover{
 	background-color: var(--acc-1);
 	color: var(--alt-bg);
-	transition: 400ms;
 	box-shadow:  inset 0 -20px 20px -20px var(--shadow);
 
 }
@@ -51,10 +54,15 @@ a{
 .menu {
   margin: 0;
   padding: 0;
-  list-style: none;
 }
+
+.menu li {
+	list-style-type: none;
+}
+
 .menu-entries {
 	float: right;
+	padding: inherit;
 }
 
 .menu-btn {
@@ -91,11 +99,16 @@ footer {
 .menu-entries {
 	text-align: center;
 	float: none;
-	display: none;
+	height: 0;
+	max-height: 0;
+	transition-property: all;
+	transition-duration: 400ms;
+	overflow: hidden;
 }
 	
 a.logo {
 	display: block;
+	transition: 400ms;
 }
 
 	.menu-btn:checked ~ 
@@ -104,7 +117,16 @@ a.logo {
 			display: block;
 	}
 
-	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover {
+	.menu-btn:checked ~ 
+	.menu li .menu-entries {
+		height: auto;
+		max-height: 200px;
+		transition-property: all;
+		transition-duration: 400ms;
+
+	}
+
+	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover	 {
 	background-color: var(--acc-1);
 	color: var(--alt-bg);
 	transition: 400ms;
@@ -138,7 +160,7 @@ a.logo {
 
 .change .bar1 {
 	background-color: var(--alt-bg);
-  transform: translate(0, 11px) rotate(-45deg);
+  transform: translate(0, 11px) rotate(45deg);
 }
 
 .change .bar2 {
@@ -146,7 +168,7 @@ a.logo {
 }
 
 .change .bar3 {
-  transform: translate(0, -11px) rotate(45deg);
+  transform: translate(0, -11px) rotate(-45deg);
 	background-color: var(--alt-bg);
 
 }
@@ -162,6 +184,15 @@ a.logo {
 
 
 
+}
+
+@media screen and (min-width: 755px) and (max-width: 1040px) {
+
+	.menu-entries {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
 }
 
 @media screen and (min-width: 1040px) {