I have Bootstrap HTML code for a navbar
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img class="logo" alt="Brand" src="images/1.png">
<a class="navbar-brand" href="Homepage.jsp">Car Surgeons Vehicle Service Centre</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="basicExampleNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="Homepage.jsp">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.jsp">About Us</a>
</li>
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu dropdown-services" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"> Car Wash</a>
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"> Auto Detailing</a>
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"> Lubrication Service</a>
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsps"> Wheel Alignment</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Login.jsp">Book Online</a>
</li>
<li class="nav-item vertical-line">
<a class="nav-link" href="Contact Us.jsp">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
However, I want it to be transparent and fixed to the top
This is my CSS code to make it transparent, but it's not working as expected:
This is my CSS code:
.transparent-navbar{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5;
box-shadow: 1px 5px black;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
Can anyone please help me?