title: How to make Bootstrap navbar transparent
body: <p>I have this <code>bootstrap html</code> for a <code>navbar</code></p>
  
  <pre><code>&lt;!--Navbar--&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
  
          &lt;!-- Navbar brand --&gt; 
  
          &lt;img class="logo" alt="Brand" src="images/1.png"&gt;
          &lt;a class="navbar-brand" href="Homepage.jsp"&gt;Car Surgeons Vehicle Service Centre&lt;/a&gt;
          &lt;!-- Collapse button --&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
                  aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;!-- Collapsible content --&gt;
          &lt;div class="collapse navbar-collapse" id="basicExampleNav"&gt;
  
              &lt;!-- Links --&gt;
              &lt;ul class="navbar-nav ml-auto"&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="Homepage.jsp"&gt;Home
                          &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="AboutUs.jsp"&gt;About Us&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item dropdown"&gt;
                      &lt;a class=" nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                          Services
                      &lt;/a&gt;
                      &lt;div class="dropdown-menu dropdown-services" aria-labelledby="navbarDropdownMenuLink"&gt;                                                        
                          &lt;a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"&gt; Car Wash&lt;/a&gt;
                          &lt;a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"&gt; Auto Detailing&lt;/a&gt;
                          &lt;a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"&gt; Lubrication Service&lt;/a&gt;   
                          &lt;a class="dropdown-item hvr-sweep-to-top" href="Services.jsps"&gt; Wheel Alignment&lt;/a&gt;                            
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="Login.jsp"&gt;Book Online&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item vertical-line"&gt;
                      &lt;a class="nav-link" href="Contact Us.jsp"&gt;Contact Us&lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;!-- Links --&gt;                
          &lt;/div&gt;
          &lt;!-- Collapsible content --&gt;
      &lt;/nav&gt;
      &lt;!--/.Navbar--&gt;
  </code></pre>
  
  <p>But I need it to <strong>transparent*</strong> and <strong>fixed to top</strong></p>
  
  <p>this is my <code>css</code> to make it transparent but it never become transparent instead it gives some shades of colors.</p>
  
  <p>this is my <code>css</code></p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>can anyone please help me?</p>