Currently, I am developing a page where on mobile devices, the navigation links need to be displayed horizontally and hidden via overflow if they are collectively too wide. To indicate to users that there are additional items to scroll through, I have added a white box-shadow with opacity that will slightly blur the covered links. This shadow is currently placed in a container next to the BUY NOW button.
If you'd like to see the current behavior, please visit this link.
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>
When the screen size is reduced to 400px or below (mostly observed on Firefox with devtools), scrolling all the way to the right results in the scrollbar being hidden by the box-shadow, which is not visually appealing. I'm seeking suggestions on how to resolve this issue within the existing structure, or any alternative approaches for better outcomes.
I appreciate all responses and thank you for your assistance!