CODEWITHSUNDEEP
htmlcssbootstrap-4linear-gradients
Krys
Krys

Reputation: 829

Linear-gradient in navigation is not displaying

I have created a navigation with a hidden horizontal scrollbar, as shown in the code snippet below. I wish to add a linear gradient to the end of the navbar from transparent to white, to show there is more links to see.

I have added it in as a pseudo ::after element, but I dont know why its not working. I thought it might of been a z-index thing, but that didn't work.

Anyone got a better idea of why?

Thanks

.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>

Upvotes: 0

Views: 53

Answers (2)

David Liang
David Liang

Reputation: 21506

First of all, I don't think you can use rgba() like that. You need to do something like:

rgba(255, 255, 255, 0)    rgba(255, 255, 255, 1)

Secondly when I look at your problem more closely, the first thing that came to my mind is that what you want could be achieved by carousel. What you're doing here would be complicated because, for example, I don't know how you're going to wire up prev and next navigation button to scroll left and right.

Instead, I try to implement what you want using a plugin called OwlCarousel: https://owlcarousel2.github.io/OwlCarousel2/

jsfiddle: http://jsfiddle.net/aq9Laaew/126019/

This might not be what you want, but I just want to give you another option implemented by javascript libraries out there.

Upvotes: 1

AKASH PANDEY
AKASH PANDEY

Reputation: 363

You are not specifying the background property correctly i mean the linear gradient property correctly.

Upvotes: 0

Related Questions