Fix dropdown going off screen

buildingblocs · Jun 4, 2021 · 4bef34c · 4bef34c
1 parent 5fe493c
commit 4bef34c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 28 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,13 +1,13 @@
 <form class="navigation-wrapper">
-	<nav class="navigation">
-		<div class="brand">
-			<a href="{{ site.baseurl }}/" title="Home">
-				<i class="logo icon" aria-hidden="true">logo</i>
-				<span class="name">{{ site.title }}</span>
-			</a>
-		</div>
-		<label for="menu" class="icon">menu</label>
-		<input id="menu" type="checkbox" />
+    <nav class="navigation">
+        <div class="brand">
+            <a href="{{ site.baseurl }}/" title="Home">
+                <i class="logo icon" aria-hidden="true">logo</i>
+                <span class="name">{{ site.title }}</span>
+            </a>
+        </div>
+        <label for="menu" class="icon">menu</label>
+        <input id="menu" type="checkbox"/>
 
 		<ul class="links">
 			<li class="link"><a href="{{ site.baseurl }}/join-us">Join Us</a></li>
@@ -56,14 +56,14 @@
 	</nav>
 </form>
 <style type="text/css">
-	.dropdown-content {
-		display: none;
-		position: absolute;
-		background-color: rgba(255, 255, 255, 0.95);
-		min-width: 160px;
-		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-		z-index: 1;
-	}
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: rgba(255, 255, 255, 0.95);
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+    }
 
 	.invert .dropdown-content {
 		display: none;
@@ -83,11 +83,17 @@
 		text-align: left;
 	}
 
-	.dropdown-content a:hover {
-		color: #ffc979;
-	}
+    .dropdown-content a:hover {
+        color: #ffc979;
+    }
 
-	.dropdown:hover .dropdown-content {
-		display: block;
-	}
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+
+    @media screen and (max-width: 700px) {
+        .dropdown-content {
+            right: 0;
+        }
+    }
 </style>