Removing Bottom Shadow Bootstrap Navbar

Question

I am using Bootstrap's default navigation bar 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.

I am using Bootstrap's default navbar template.

I have tried setting box-shadow: none; on each of the navbar classes I suspect (from inspecting the elements) may be causing this (.navbar, .navbar-default, and .container-fluid) to no avail.

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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">LOGO-GOES-HERE</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

I have also looked at Bootstrap's CSS and could not locate where the box-shadow is coming from.

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?

Thank you so much for your time in advance.

Answer 1

This code is enough:

.navbar-default {
  box-shadow: none;
}

But make sure that the code is placed after the link to bootstrap-theme.min.css. Otherwise your changes will not work.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css');

.navbar-default {
  box-shadow: none;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">LOGO-GOES-HERE</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>