title: Removing Bottom Shadow Bootstrap Navbar
body: <p>I am using Bootstrap's <a href="https://getbootstrap.com/components/#navbar" rel="nofollow noreferrer">default navigation bar</a> for my website. I would like the navbar and the content below the navbar to be the same color, without any demarcation between them. However, it appears that there is a shadow on the bottom of the navigation bar that I can't seem to get rid of. </p>
  
  <p><img src="https://i.stack.imgur.com/PsVWj.png" alt="shadow under navbar"></p>
  
  <p>I am using Bootstrap's default navbar template.</p>
  
  <p>I have tried setting <code>box-shadow: none;</code> on each of the navbar classes I suspect (from inspecting the elements) may be causing this (<code>.navbar</code>, <code>.navbar-default</code>, and <code>.container-fluid</code>) to no avail. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    box-shadow: none;
  }
  .navbar {
    .container-fluid {
      box-shadow: none;
    }
    box-shadow: none;
  }
  
  .navbar .navbar-collapse {
    box-shadow: none;
  }
  
  .navbar .navbar-nav {
    box-shadow: none;
  }
  
  .navbar-default {
    box-shadow: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"&gt;
  
  &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-collapse" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;LOGO-GOES-HERE&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href=""&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;LINK&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have also looked at Bootstrap's CSS and could not locate where the box-shadow is coming from. </p>
  
  <p>Does anyone know any CSS I could write to remove this shadow from the bottom of the navigation bar, so that there is no line separating the navbar from the rest of the content?</p>
  
  <p>Thank you so much for your time in advance.</p>