1

I would like to add a box-shadow to my site that uses bootstrap. I have applied a box-shadow to the body-content:

.body-content {
    background-color: white; 
    box-shadow:0 0 25px hsla(0, 0%, 0%, 0.60);
}

However, I would also need the shadow on the nav-bar, because currently it looks like this:

Is there a standard solution for this? I have not found anything but hacks.

EDIT: Sorry for not being able to provide a fiddle..

peter
  • 2,103
  • 7
  • 25
  • 51

1 Answers1

1

Wrap the .navbar and the .body-content inside a div, apply box-shadow to parent div.

.shadow-container {
  box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.60);
}
.body-content {
  background-color: white;
  box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.60);
  padding: 15%;
  text-align: center;
}
.navbar {
  margin: 0 !important; /* Avoid !important, added here for priority in snippet */
  border-bottom: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="shadow-container">
    <nav class="navbar navbar-default">

      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="Brand" src="...">
        </a>
      </div>
    </nav>


    <div class="body-content">
      Rest of the content
    </div>
  </div>
</div>
m4n0
  • 29,823
  • 27
  • 76
  • 89
  • Thanks for your help, Manoj. I don't want there to be space between navbar and content, the border on the navbar should only be on the left and right. It should look like one single box – peter Jul 03 '15 at 11:08
  • Take a look here: http://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only – Thomas Jul 03 '15 at 11:10
  • Also, the space between those elements is in the snippet only, it should not appear on your site. – Thomas Jul 03 '15 at 11:11
  • I have edited the code and removed the spacing. – m4n0 Jul 03 '15 at 11:13
  • Thomas, Hamish's solution in your linked post uses fixed width which I cannot use. – peter Jul 03 '15 at 11:27
  • Manoj, if I put a shadow-container around navbar and body-content, then it is stretched from the very left to the very right, so left and right shadow are not visible.. – peter Jul 03 '15 at 11:33
  • Can you post your current code? I am not sure about the problem unless I look into it. BTW Two people have asked to close this question because you have not posted the demo. – m4n0 Jul 03 '15 at 11:35
  • I've voted to close the question myself now... I will try and create a fiddle later. :o( thanks for your help anyways! – peter Jul 03 '15 at 12:15