title: filter(drop-shadow) dissappear for some menu elements
body: <p>So I have a little triangle under my menu that points to the current active menu item, using the activeClassName of Gatsbys Link component. It blends together nicely with my content container, or it should.</p>
  <p>Problem is that the boundary links loose the filter(drop-shadow) effect. When inspecting the computed elements the css is exactly the same between the middle and the boundary Link components, even though the drop-shadow is obviously missing. I'm very new to css design so I don't have the knowledge to pinpoint exactly why this is happening, incompatible rules..etc.</p>
  <p><img src="https://i.imgur.com/sbvL1xH.gif" alt="menu bar" /></p>
  <p>Here is my code</p>
  <p><strong>Navbar.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>const NavBar = () =&gt; {
    const {
      siteMetadata: { menuLinks },
    } = useSiteMetadata()
    console.log(navMain)
    return (
      &lt;nav className={navMain}&gt;
        &lt;ul className={navList}&gt;
          {menuLinks.map(link =&gt; (
            &lt;li key={link.name}&gt;
              &lt;Link
                to={link.link}
                className={navItem}
                activeClassName={activeNavItem}
              &gt;
                {link.name}
              &lt;/Link&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/nav&gt;
    )
  }
  </code></pre>
  <p><strong>Navbar.module.scss</strong></p>
  <pre><code>.nav-item {
    margin-left: 2rem;
  }
  .active-nav-item {
    position: relative;
    color: #663f18 !important;
    &amp;::after {
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      content: &quot;&quot;;
      border-bottom: 40px solid white;
      position: absolute;
      bottom: -35px;
      width: 0px;
      left: 50%;
      margin-left: -30px;
      mix-blend-mode: screen;
      filter: drop-shadow(0px 2px 4px);
      pointer-events: none;
    }
  }
  </code></pre>