add ID to header to avoid clashing classes

ogcio · Sep 17, 2024 · 571c07a · 571c07a
1 parent 92379f4
commit 571c07a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/packages/react/ds/src/header/header.tsx b/packages/react/ds/src/header/header.tsx
@@ -19,7 +19,10 @@ export type HeaderProps = {
 
 export function Header({ logoLink, languages, navLinks }: HeaderProps) {
   return (
-    <header className="gi-relative gi-overflow-x-clip gi-bg-emerald-800 gi-border-gold-500 gi-font-primary">
+    <header
+      id="GovieHeader"
+      className="gi-relative gi-overflow-x-clip gi-bg-emerald-800 gi-border-gold-500 gi-font-primary"
+    >
       {languages && (
         <div className="gi-hidden sm:gi-flex gi-bg-emerald-700 gi-h-10 gi-justify-end gi-items-center">
           <ul className="gi-py-2 gi-flex gi-justify-end gi-gap-4 gi-items-center gi-h-full gi-mr-8 gi-my-1">

diff --git a/packages/react/ds/styles.css b/packages/react/ds/styles.css
@@ -19,23 +19,27 @@
 
 /* Header Styles */
 
-#MenuContainer:has(#SearchTrigger:checked) ~ #SearchContainer {
-  height: var(--gieds-space-40);
+#GovieHeader {
+
+  #MenuContainer:has(#SearchTrigger:checked) ~ #SearchContainer {
+    height: var(--gieds-space-40);
+  }
+
+  #SearchTrigger:checked ~ .search-icon {
+    display: none; 
+  }
+
+  #SearchTrigger:checked ~ .close-icon {
+    display: block; 
+  }
+
+  #MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderMenuContainer {
+    transform: translateX(0);
+  }
+  #MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderOverlayContainer {
+    display: block;
+    position: fixed;
+  }
 }
 
-#SearchTrigger:checked ~ .search-icon {
-  display: none; 
-}
-
-#SearchTrigger:checked ~ .close-icon {
-  display: block; 
-}
 
-
-#MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderMenuContainer {
-  transform: translateX(0);
-}
-#MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderOverlayContainer {
-  display: block;
-  position: fixed;
-}