I've successfully created a navigation bar with a hidden horizontal scrollbar by using the code snippet provided below. However, I want to enhance the design by adding a linear gradient at the end of the navbar from transparent to white in order to indicate that there are more links available.
Although I attempted to achieve this by adding a pseudo ::after element, it doesn't seem to be working as expected. I initially thought it might have been a z-index-related issue, but adjusting that didn't solve the problem either.
If anyone has any insights or suggestions on how to address this matter effectively, please feel free to share them!
Thank you.
.nav-scroller {
position: relative;
z-index: 2;
height: 50px;
overflow-y: hidden;
border: 1px solid red;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 0.875rem;
}
.nav-scroller .nav::after {
content: "";
display: block;
height: 50px;
width: 60px;
background: linear-gradient(90deg, rgba(white, 0), rgba(white, 1));
position: absolute;
top: 0;
right: 0;
border: 1px solid green;
}<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">U.S.</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
<div class="next"><span class="">></span></div>
<div class="prev"><span class=""></span></div>
</div>
<div class="jumbotron-fluid jumbotron">
<div class="col-lg-10 text-center">
<div class="lead">
<h1>Horizontal Navigation Scroller</h1>
<small>Simple and elegant solution with CSS</small>
</div>
</div>
</div>
</div>