Padding of default fat menu is covering wider site logos and home link does partially not work in covered area

[acsr]

Wide site logo 520px wide

If you have a wide site logo consisting of a long word mark and want to display that prominently you may want to increase the width of the logo. This works fine at first sight even for mobile when you change this like below. You get a nice responsive scaling down to the mobile sizes.

Click issue

• When you start to click on the logos right half or 2/5 part the area cannot receive a click to the link to the site NavRoot.
• When you inspect the code the padding of the fat menu is covering the click area.

Screenshot of the inspector with the overlapping area:

<div class="logo-nav-wrapper">
  <div class="logo">
    <a aria-label="Startseite" href="/de">
      <img src="/de/@@images/logo-520-4c43dc8b268ddeb3c24eedb7bf85b6f1.png" width="520" height="64" alt="Logo">
    </a>
  </div>
  <nav id="navigation" aria-label="navigation" class="navigation">...</nav>
</div>

.navigation {
    height: 128px;
    padding-top: 85px;  // this is the blocker
}

When you change the z-index either of the logo wrapper by incrasing or the fat-menu wrapper by lowering, the logo is clickable, but the menu does not work anymore.

I could not find a proper way to fix this just by CSS without creating a brutal shadow of the header.

Conclusion

Width of the logo should not be limited by the design of the fat menu. Any solutions welcome.

My custom CSS with wide logo

I share the whole header CSS from project addon src/theme/_main.scss override to unveil possible own other flaws:

// override _header.scss

.header-wrapper {
  // reduce vertical whitespace of solo H2
  h2,
  h2:last-child {
    margin-top: 60px;
    margin-bottom: 40px;
  }
  .header {
    // unset justify-content: space-between
    .tools-wrapper {
      justify-content: unset;
      padding-top: 8px;
      .intranet-flag {
        margin-right: 1rem;
      }
    }
    .logo-nav-wrapper {
      // move logo up
      padding-top: 0;
      padding-bottom: 60px;
      .logo {
        // increase logo size
        max-width: 520px;
        max-height: 80px;
        // move logo up (logo has low height)
        margin-top: -40px;
        @media only screen and (max-width: $largest-mobile-screen) {
          margin-top: 0;
        }
        a img {
          max-width: 170%;  
          @media only screen and (max-width: $largest-mobile-screen) {
            max-width: 100%;
          }
        }
      }
    }
  }
}