[#0] bug fix on mobile menu transparent area on scroll

adobe · Jun 29, 2023 · 1bcbae9 · 1bcbae9
1 parent a0fb72d
commit 1bcbae9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -48,14 +48,15 @@
 
 .franklin .gnav {
  grid-template-columns: 60px 1fr auto 60px var(--curtain-width);
- grid-template-areas: 'toggle brand  brand profile profile'
+ grid-template-areas: 'toggle brand brand profile profile'
  'search search search search mobileCurtain'
  'navlist navlist navlist navlist mobileCurtain';
 }
 
 @media (max-width: 1199px) {
  .franklin button.gnav-toggle,
- .franklin .gnav-brand,
+ .franklin .brand-wrapper,
+ .franklin .gnav-brand-wrapper,
  .franklin .profile {
  position: sticky;
  top: 0;
@@ -108,23 +109,21 @@ button.gnav-toggle::after {
 }
 
 /* Navbar Logo + Brand Name */
-.gnav .gnav-brand {
+.gnav .gnav-brand-wrapper {
  grid-area: brand;
- display: flex;
- align-items: center;
- color: #fa0f00;
- font-size: 18px;
- line-height: 18px;
- font-weight: 700;
+ background: var(--color-white);
 }
 
 .franklin .gnav .gnav-brand {
+ display: flex;
+ align-items: center;
  color: var(--color-black);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  width: fit-content;
+ height: 100%;
 }
 
 .gnav .gnav-brand img {

diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -41,7 +41,9 @@ class Gnav {
 
  const brand = this.decorateBrandLogo();
  if (brand) {
- nav.append(brand);
+ const brandWrapper = createTag('div', { class: 'gnav-brand-wrapper' });
+ brandWrapper.append(brand);
+ nav.append(brandWrapper);
  }
 
  const ctaButtonWrapper = this.decorateCTAButton();