Skip to content
This repository was archived by the owner on Nov 25, 2024. It is now read-only.

Commit fc3a172

Browse files
authored
fix: Navbar center slot responsive position (#269)
* Push * Add changeset
1 parent 78138ab commit fc3a172

File tree

2 files changed

+23
-2
lines changed

2 files changed

+23
-2
lines changed

.changeset/brown-comics-appear.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/site-kit': patch
3+
---
4+
5+
fix: Navbar Center positionin

packages/site-kit/src/lib/nav/Nav.svelte

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
8282
{/if}
8383

8484
<div class="desktop">
85-
<slot name="search" />
85+
<div class="center-area">
86+
<slot name="search" />
87+
</div>
8688

8789
<div class="menu">
8890
{#each links as link}
@@ -312,10 +314,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
312314
}
313315
}
314316
317+
.desktop .center-area {
318+
display: flex;
319+
align-items: center;
320+
justify-content: center;
321+
flex: 1;
322+
}
323+
315324
@media (min-width: 800px) {
316325
nav {
317326
display: grid;
318-
grid-template-columns: 1fr auto 1fr;
327+
grid-template-columns: auto 1fr 1fr;
319328
}
320329
321330
nav::after {
@@ -345,4 +354,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
345354
display: none;
346355
}
347356
}
357+
358+
@media (min-width: 1240px) {
359+
nav {
360+
display: grid;
361+
grid-template-columns: 1fr auto 1fr;
362+
}
363+
}
348364
</style>

0 commit comments

Comments
 (0)