From 8526ee6a118923306dd491293c4f929819b5a7ba Mon Sep 17 00:00:00 2001
From: Padmaja <52911293+padms@users.noreply.github.com>
Date: Wed, 22 Jan 2025 19:11:30 +0530
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20After=202=20nd=20review=20#2?=
 =?UTF-8?q?736?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/pageComponents/shared/Header.tsx | 31 +++++++++++++++++++---------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
index 4918a02b3..7e2e8e866 100644
--- a/web/pageComponents/shared/Header.tsx
+++ b/web/pageComponents/shared/Header.tsx
@@ -112,6 +112,7 @@ const Header = ({ slugs, menuData, stickyMenuData }: HeaderProps) => {
 
   const stickyMenuKey = (stickyMenuData?.background as keyof ColorKeyTokens) || ('white-100' as keyof ColorKeyTokens)
   const twBg = colorKeyToUtilityMap[stickyMenuKey]?.background
+  const hasOnlySingleLink = !(anchorReference && resourceLink)
 
   return (
     <div className="sticky top-0 z-10">
@@ -159,17 +160,27 @@ const Header = ({ slugs, menuData, stickyMenuData }: HeaderProps) => {
         </Topbar>
         {stickyMenuData && (
           <div
-            className={`hidden lg:grid w-full items-center ${twBg} p-4 grid-cols-2 lg:grid-cols-5 gap-2 lg:px-16 lg:gap-16 shadow-top-bar z-40`}
+            className={` hidden lg:block ${twBg} w-full shadow-top-bar z-40  px-[var(--layout-paddingHorizontal-small)]`}
           >
-            <div className="text-center font-medium lg:col-span-3 text-md col-span-2"> {stickyMenuData?.title}</div>
-            <StickyMenuLink className="mr-4 place-self-end self-center" href={`#${anchorReference?.anchorReference}`}>
-              {anchorReference?.title}
-            </StickyMenuLink>
-            {resourceLink && (
-              <StickyMenuLink href={resourceLink.href} isDownloadable>
-                {resourceLink.label}
-              </StickyMenuLink>
-            )}
+            <div className={`lg:grid grid-cols-3 max-w-[var(--topbar-innerMaxWidth)]  py-4 `}>
+              <div className={`text-start font-medium text-md self-center ${hasOnlySingleLink ? 'col-span-2' : ''}`}>
+                {' '}
+                {stickyMenuData?.title}
+              </div>
+              {anchorReference && (
+                <StickyMenuLink
+                  className="mr-4 place-self-end self-center"
+                  href={`#${anchorReference.anchorReference}`}
+                >
+                  {anchorReference.title}
+                </StickyMenuLink>
+              )}
+              {resourceLink && (
+                <StickyMenuLink className="mr-4 place-self-end self-center" href={resourceLink.href} isDownloadable>
+                  {resourceLink.label}
+                </StickyMenuLink>
+              )}
+            </div>
           </div>
         )}
       </BackgroundContainer>

From 112314b058b0b4f7f981f09b10519dd9490812fc Mon Sep 17 00:00:00 2001
From: Padmaja <52911293+padms@users.noreply.github.com>
Date: Thu, 23 Jan 2025 10:28:51 +0530
Subject: [PATCH 2/2] :lipstick: Use tailwind #2736

---
 web/pageComponents/shared/Header.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
index 7e2e8e866..662192cc3 100644
--- a/web/pageComponents/shared/Header.tsx
+++ b/web/pageComponents/shared/Header.tsx
@@ -159,9 +159,7 @@ const Header = ({ slugs, menuData, stickyMenuData }: HeaderProps) => {
           </Topbar.InnerContainer>
         </Topbar>
         {stickyMenuData && (
-          <div
-            className={` hidden lg:block ${twBg} w-full shadow-top-bar z-40  px-[var(--layout-paddingHorizontal-small)]`}
-          >
+          <div className={` hidden lg:block ${twBg} w-full shadow-top-bar z-40  px-layout-sm`}>
             <div className={`lg:grid grid-cols-3 max-w-[var(--topbar-innerMaxWidth)]  py-4 `}>
               <div className={`text-start font-medium text-md self-center ${hasOnlySingleLink ? 'col-span-2' : ''}`}>
                 {' '}