title: Gradient Mask on Horizontally Scrolling Navigation
body: <p>I have created a pure <code>css</code> Horizontally scrolling navigation. I'm trying to apply a gradient mask although I am unsure how I would apply it once I scroll the navigation into the overflow.</p>
  
  <p>As per this screenshot, it works fine initially, but once I scroll..</p>
  
  <p><a href="https://i.stack.imgur.com/SMZWB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SMZWB.png" alt="enter image description here"></a></p>
  
  <p>Once the <code>div</code> is scrolled into the overflow content</p>
  
  <p><a href="https://i.stack.imgur.com/ZT1FI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZT1FI.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.topnav {
    display: none;
    min-width: 100vw;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    padding-top: 60px;
    overflow: auto;
    white-space: nowrap;
  }
  
  .topnav div {
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
  }
   .topnav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: inline-block;
        transition: color 0.3s;
  
    }
  
    .topnav a:hover {
        color: #f1f1f1;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mytopnav" class="topnav"&gt;
    &lt;div&gt;
      &lt;a class="navitem" href="#"&gt;About&lt;/a&gt;
      &lt;a class="navitem" href="#"&gt;Packages&lt;/a&gt;
      &lt;a class="navitem" href="#"&gt;Features&lt;/a&gt;
      &lt;a class="navitem" href="#"&gt;Blog&lt;/a&gt;
      &lt;a class="navitem" href="#" id="contact"&gt;Contact&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have omitted some <code>js</code> and other components for my navigation but just provided the crucial pieces. </p>
  
  <p>I kinda need someone to point me in the right direction of somehow applying a mask in front of the navigation items</p>