fix: Navbar center slot responsive position (#269)

* Push * Add changeset
sveltejs · Dec 7, 2023 · fc3a172 · fc3a172
1 parent 78138ab
commit fc3a172
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/brown-comics-appear.md b/.changeset/brown-comics-appear.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': patch
+---
+
+fix: Navbar Center positionin
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -82,7 +82,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	{/if}
 
 	<div class="desktop">
-		<slot name="search" />
+		<div class="center-area">
+			<slot name="search" />
+		</div>
 
 		<div class="menu">
 			{#each links as link}
@@ -312,10 +314,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
+	.desktop .center-area {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+	}
+
 	@media (min-width: 800px) {
 		nav {
 			display: grid;
-			grid-template-columns: 1fr auto 1fr;
+			grid-template-columns: auto 1fr 1fr;
 		}
 
 		nav::after {
@@ -345,4 +354,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: none;
 		}
 	}
+
+	@media (min-width: 1240px) {
+		nav {
+			display: grid;
+			grid-template-columns: 1fr auto 1fr;
+		}
+	}
 </style>