diff --git a/docs/components/page/nav.md b/docs/components/page/nav.md
index 84ceea0..b6c6aac 100644
--- a/docs/components/page/nav.md
+++ b/docs/components/page/nav.md
@@ -9,6 +9,7 @@ const element = inject("manifest").for("page", "nav");
     --color-primary: var(--vp-c-neutral);
     --color-link-hover: var(--vp-button-brand-active-bg);
     --color-link-shadow: var(--vp-button-brand-hover-bg);
+    --color-link-folded: var(--vp-c-white);
     
     &::part(container) {
       position: relative;
@@ -69,10 +70,6 @@ const element = inject("manifest").for("page", "nav");
       }
       
       @container demo-container (width < 510px) {
-        &::part(content) {
-          --color-primary: var(--vp-c-white);
-        }
-        
         &::part(links) {
           margin-left: 100px;
         }
diff --git a/src/components/page/nav.js b/src/components/page/nav.js
index 48639fc..cb65da5 100644
--- a/src/components/page/nav.js
+++ b/src/components/page/nav.js
@@ -69,7 +69,6 @@ export class PageNav extends LitElement {
                             <slot @slotchange=${this.#listenLinks}></slot>
                         </div>
                         <div part="socials">
-                            <slot name="socials" @slotchange=${() => this.requestUpdate()}></slot>
                             ${this.#socials.map((a) => html`
                                 <a href="${a.href}" target="_blank" title="${a.innerText || a.title || a.querySelector("img")?.alt}">
                                     ${choose(a.href?.match(/^https?:\/\/(?:www\.)?(.*?)\/.*$/)?.at(1), [
@@ -93,6 +92,7 @@ export class PageNav extends LitElement {
                                     })}
                                 </a>
                             `)}
+                            <slot name="socials" @slotchange=${() => this.requestUpdate()}></slot>
                         </div>
                     </nav>
                 </div>