Removing Bottom Shadow Bootstrap Navbar - html

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>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</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>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Answer 2

You can try this link, it works. There is a shadow in the border.
https://getbootstrap.com/docs/4.3/utilities/shadows/
I tried like this, without any css as the solutions above. Just insert "shadow-none" as Documented.
<nav class="shadow-none navbar navbar-expand-sm ">
</nav>

Answer 3

Dont think there is a box shadow on the bootstrap navbar but there is a border have you tried
.navbar-default{
border:none;
}

Answer 4

You need to make sure that CSS commands are compatible with the browser. The browser compatibility description is given below.
The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme.
The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.
.navbar{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Answer 5

just add "shadow-none" class in the nav element

Answer 6

this one solved my problem.
.navbar-default {
background:none;
box-shadow: none;
}

Answer 7

If you just want to remove box-shadow from mdb-navbar do the following,
Inside your style.scss file in angular project paste the following code .navbar{ box-shadow: none!important; }