CODEWITHSUNDEEP
htmltwitter-bootstrapcssnavbarshadow
maria
maria

Reputation: 55

Removing Bottom Shadow Bootstrap Navbar

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.

shadow under navbar

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.

Upvotes: 4

Views: 10204

Answers (7)

Amol Sharma
Amol Sharma

Reputation: 1

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

Upvotes: 0

Rizqy Eka Putra Rizaldy
Rizqy Eka Putra Rizaldy

Reputation: 35

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

Upvotes: 1

Luke Marak
Luke Marak

Reputation: 101

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>

Upvotes: 2

Vishal Mamidi
Vishal Mamidi

Reputation: 11

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

Upvotes: 1

Ayon Elahi
Ayon Elahi

Reputation: 1

this one solved my problem. 

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

Upvotes: 0

Steve K
Steve K

Reputation: 9065

Dont think there is a box shadow on the bootstrap navbar but there is a border have you tried

.navbar-default{
  border:none;
}

Upvotes: 1

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10418

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>

Upvotes: 5

Related Questions