In my Bootstrap 4 project, I have a fixed navbar with a linear gradient background image. The navbar is transparent and fixed, but as I scroll down the page, the gradient disappears. Can anyone help me figure out how to keep the background image visible while scrolling? Thanks in advance for your assistance. Here is the CSS and HTML code snippets I have used:
CSS
.Mynavbar{
background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
}
.Mynavbar .navbar {
background-color: transparent !important;
}
HTML
<div class="Mynavbar">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="Container container">
<a class="navbar-brand" href="#">
<img src="images/Logo.png" alt="Image Goes Here">
</a>
<button id="hamburger" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse Navbaritems" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Keep in mind that the necessary Bootstrap references are included, although not shown here to keep the question concise :)