fix(theme/nav): Fixed small layout shift on scroll

elliotcourant · elliotcourant · commit ca82d8aa111a · 2026-01-08T20:11:56.000-06:00
When scrolling: as the nav bar transitions to having a bottom border and
a blurred background, the layout of the icons would shift up slightly
due to the bottom border size changing. To fix this I've made it so that
the bottom border is always 1px but is transparent by default. This
prevents the layout shift when scrolling.
diff --git a/packages/core/src/theme/components/HomeBackground/useNavTransparent.tsx b/packages/core/src/theme/components/HomeBackground/useNavTransparent.tsx
@@ -36,7 +36,8 @@ export const useNavTransparent = () => {
 
   return (
     <style>
-      {'body:not(.notTopArrived) .rp-nav {background: transparent !important; border-bottom: none !important;}' +
+      {'body:not(.notTopArrived) ' +
+        '.rp-nav {background: transparent !important; border-bottom: 1px solid transparent !important;}' +
         // TODO: discussion
         '.rp-nav {background: color-mix(in srgb,var(--rp-c-bg) 60%,transparent);backdrop-filter: blur(25px);}'}
     </style>
