add fixed header width to 100vw using before pseudoclass

goldipl · Jun 28, 2024 · d26f611 · d26f611
1 parent d50113a
commit d26f611
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/sass/common/_header.scss b/sass/common/_header.scss
@@ -32,8 +32,18 @@
       left: calc((100vw - 1728px - 16px) / 2);
       width: 100%;
       max-width: 1728px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       z-index: 9999999999999999999999999999;
+      &::before {
+        content: "";
+        position: absolute;
+        left: -100vw;
+        top: 0;
+        width: 200vw;
+        height: 77px;
+        background-color: $light_grey01;
+        z-index: -1;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      }
     }
 
     &__logo {

diff --git a/sass/main.css b/sass/main.css
@@ -1640,9 +1640,19 @@ body {
   left: calc((100vw - 1728px - 16px) / 2);
   width: 100%;
   max-width: 1728px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   z-index: 10000000000000000000000000000;
 }
+.header-2-0 .top-header.fixed-header::before {
+  content: "";
+  position: absolute;
+  left: -100vw;
+  top: 0;
+  width: 200vw;
+  height: 77px;
+  background-color: #f5f5f5;
+  z-index: -1;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
 .header-2-0 .top-header__logo {
   margin: 0 38px;
 }