Re-add fixed header and blend mode to logo (#9)

* re-add fixed header and blend mode to logo * invert logo image
BuidlGuidl · Oct 30, 2024 · 6c734a5 · 6c734a5
1 parent eaaf76b
commit 6c734a5
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -8,10 +8,14 @@ import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
  */
 export const Header = () => {
   return (
-    <header className="container mx-auto">
-      <div className="p-6 lg:p-8 flex flex-wrap items-center justify-between border-l border-r border-black">
-        <Image className="w-40 md:w-auto" src="client-logo.svg" alt="logo" width={260} height={78} />
-        <RainbowKitCustomConnectButton />
+    <header className="container mx-auto pb-24 md:pb-32 lg:pb-36 border-l border-r border-black">
+      <div className="fixed container z-10 mix-blend-difference p-6 lg:p-8">
+        <Image className="w-40 md:w-auto invert" src="client-logo.svg" alt="logo" width={260} height={78} />
+      </div>
+      <div className="fixed container z-10 p-6 lg:p-8 flex justify-end">
+        <div className="mt-2">
+          <RainbowKitCustomConnectButton />
+        </div>
       </div>
     </header>
   );