title: Cannot make Bootstrap navbar transparent
body: <p>I have been trying to make my navbar transparent but so far nothing has worked for me. Can someone teach me how to do it? I assume it has something to do with the space that it is taking up in regards to the body content, but I am not sure what can be done as I have already tried reversing the div tags to be outside of the body.</p>
  <p>This is my desired result : <a href="https://i.stack.imgur.com/kIJXx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kIJXx.png" alt="enter image description here" /></a></p>
  <p>Fiddle : <a href="https://jsfiddle.net/zr1qh780/" rel="nofollow noreferrer">https://jsfiddle.net/zr1qh780/</a></p>
  <p>My HTML :</p>
  <pre><code>&lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
        &lt;!-- Navigation menu --&gt;
      &lt;header&gt;
        &lt;nav class=&quot;my-nav navbar navbar-light navbar-expand-lg&quot;&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data- 
           target=&quot;#navbarsExample08&quot; aria-controls=&quot;navbarsExample08&quot; aria-expanded=&quot;false&quot; aria- 
           label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class=&quot;collapse navbar-collapse justify-content-md-center&quot; id=&quot;navbarsExample08&quot;&gt;
            &lt;ul class=&quot;navbar-nav&quot;&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;index.html&quot; id=&quot;dropdown08&quot; data-toggle=&quot;dropdown&quot; aria- 
                 haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;ACTIVITÉS&lt;/a&gt;
                &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdown08&quot;&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;rafting.html&quot;&gt;Rafting&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;canyoning.html&quot;&gt;Canyoning&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;saut-parachute.html&quot;&gt;Saut en parachute&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;soufflerie.html&quot;&gt;Simulation de chute libre&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;saut-elastique.html&quot;&gt;Saut à l’élastique&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;OFFRES&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;ÉVÉNEMENTS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;À PROPOS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;ESPACE HANDICAP&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link contact&quot; href=&quot;contact.html&quot;&gt;CONTACT&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;hamburger&quot;&gt;
          &lt;span style=&quot;font-size:30px;cursor:pointer;color: white;&quot; onclick=&quot;openNav()&quot;&gt;&amp;#9776;&lt;/span&gt;
        &lt;/div&gt;
        &lt;/nav&gt;
        
      &lt;/header&gt;
  
      &lt;div id=&quot;myNav&quot; class=&quot;overlay&quot;&gt;
        &lt;a href=&quot;javascript:void(0)&quot; class=&quot;closebtn&quot; onclick=&quot;closeNav()&quot;&gt;&amp;times;&lt;/a&gt;
        &lt;div class=&quot;bar overlay-content&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;ACTIVITÉS&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;OFFRES&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;ÉVÉNEMENTS&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;À PROPOS&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;ESPACE HANDICAP&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;CONTACT&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>My CSS:</p>
  <pre><code>    .logo { 
        margin-right:5px;
      }
      
      .my-nav{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 8px;
        }
      
      .navbar-light .navbar-nav .nav-link {
        color: white;
      }
      
      .navbar-nav &gt; li {
          padding-left:25px;
          padding-right:45px;
          float:none;
          display:table-cell;
          text-align:center;
          font-size: 15px;
          font-weight: 500;
      }
      
      .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: #fc3218;
      }
      
      .nav-link:active { 
        color: #fc3218;
      }
      
      .navbar {
        background: grey
      }
      
      .dropdown-menu {
        color: white;
        background-color: #fc3218;
      }
      
      .dropdown-item { 
        color: white;
        font-size: 14px;
      }
      
      .navbar-collapse {
        flex-grow: 0.3;
       
      }
  </code></pre>