make header float above on mobile to prevent layout shift

jones58 · Sep 26, 2024 · b277cb2 · b277cb2
1 parent ab46656
commit b277cb2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -39,7 +39,10 @@ function Header() {
   }, [isOpen]);
 
   return (
-    <header ref={headerRef} className="header z-50">
+    <header
+      ref={headerRef}
+      className="fixed top-0 left-0 right-0 z-50 bg-white sm:bg-transparent sm:relative"
+    >
       <div className="flex justify-center sm:justify-between items-center space-x-5 py-10">
         <Link to="/">
           <h1 className="text-3xl">London Brutalist Map</h1>

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -9,7 +9,7 @@ export default function Layout({
   return (
     <div className="sm:mx-10">
       <Header />
-      {children}
+      <div className="py-28 sm:py-0">{children}</div>
       <Footer />
     </div>
   );