From 6c734a595e73e87bb553dcfa17d9f12b25af4fc7 Mon Sep 17 00:00:00 2001
From: Hunter Chang <716376+ChangoMan@users.noreply.github.com>
Date: Thu, 31 Oct 2024 00:59:38 +0800
Subject: [PATCH] Re-add fixed header and blend mode to logo (#9)

* re-add fixed header and blend mode to logo

* invert logo image
---
 packages/nextjs/components/Header.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 5f0f92b..26c71d9 100644
--- 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>
   );