子容器的框影叠加滚动条

Question

So I'm working on a page where the desired behavior on mobile is to have all links displayed horizontally in the nav, and be hidden via overflow if they're collectively too wide. To indicate to the user that there's additional items on scoll, I've added a white box-shadow with opacity that will slightly obscure the links that are being covered. Currently, this shadow is added to an adjacent container with the BUY NOW button.

Here is a codepen showing the current behavior:

http://codepen.io/thecox/pen/wWWrej?editors=1100

LESS

.sticky-nav-menu {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  margin: 0;

  li {
    display: inline-block;
    white-space: nowrap;
    padding-right: 25px;
    margin-right: 0;

    &.active a {
      color: fade(@jet-dark, 80);
    }

    &:last-of-type {
      margin-right: 0;
    }
  }
}

.sticky-nav-overflow {
  height: 100%;
  margin-right: 4%;
  overflow: scroll;
}

.sticky-nav-mobile {
  padding-left: 2%;
  z-index: 1;
  box-shadow: -10px 0 5px 13px rgba(255, 255, 255, 1);
}

HTML

<nav class="sticky-nav js-sticky-nav clearfix">
  <div class="sticky-nav-inner">
    <div class="sticky-nav-overflow">
      <ul class="sticky-nav-menu">
        <li class="active">
          <a href="#lorem" class="sticky-nav-link">THE LOREM</a>
        </li>
        <li>
          <a href="#lorem" class="sticky-nav-link">THE IPSUM</a>
        </li>
        <li>
          <a href="#lorem" class="sticky-nav-link">THE CAESAR SALAD</a>
        </li>
        <li>
          <a href="#lorem" class="sticky-nav-link">THE RIO GRANDE</a>
        </li>
      </ul>
    </div>
    <div class="sticky-nav-mobile">
      <a href="#" class="sticky-nav-cta">BUY NOW</a>
    </div>
  </div>
</nav>

Shrink the screen to 400px or below (I'm seeing this behavior mostly on Firefox, resized with devtools) and you'll see that when the link container is scrolled to the far right, the scrollbar is covered up by the box-shadow in an unattractive manner. I'm wondering if anyone has any thoughts how this could be resolved with the current structure. Or any other method that might yield better results.

Any and all answers are appreciated. Thanks for your assistance!

Answer 1

If i understood correctly the problem is box shadow covering scroll on screens bellow 400px. You can avoid this by changing margin right value on screens from 4% to 8% for example.

.sticky-nav-overflow { margin-right: 8%;}