How to make Bootstrap navbar transparent [duplicate]

Question

I have this bootstrap html for a navbar

<!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <!-- Navbar brand --> 

        <img class="logo" alt="Brand" src="images/1.png">
        <a class="navbar-brand" href="Homepage.jsp">Car Surgeons Vehicle Service Centre</a>
        <!-- Collapse button -->
        <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>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">

            <!-- Links -->
            <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>
            <!-- Links -->                
        </div>
        <!-- Collapsible content -->
    </nav>
    <!--/.Navbar-->

But I need it to transparent* and fixed to top

this is my css to make it transparent but it never become transparent instead it gives some shades of colors.

this is my css

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

Answer 1

Bootstrap 4 comes with a bg-transparent class. Apply that to your navbar.

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>