html - Add a drop shadow to a top-fixed nav bar using Bootstrap

Question

I'm attempting to add a drop shadow to my nav bar I have through Bootstrap, but I can't seem to figure it out. Maybe somebody can point me in the correct direction. All the other questions I've seen that have been asked about a similar topic have incredibly lengthy responses of messy code, but there has to be a simple way to do it, isn't that the whole point of Bootstrap after all.

Here's my HTML relating to my nav:

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="index.html">eService</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Civic Events</a></li>
              <li><a href="#">Charity Events</a></li>
              <li><a href="#">Grand Openings</a></li>
              <li><a href="#">Concerts</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
      </div><!--/.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

And here's my CSS relating to the navbar:

#custom-nav {
    -webkit-box-shadow: 20px 20px 20px #FC0;
    -moz-box-shadow:    20px 20px 20px #FC0;
    box-shadow:         20px 20px 20px #FC0;
    z-index:999;
}

I'm aware that with the current px dimensions I have set for my shadow it will appear like a solid block. I plan on adjusting once I can get this dang thing to work. Thanks for any help or pointers.

Mucho love.

question from:https://stackoverflow.com/questions/14904731/add-a-drop-shadow-to-a-top-fixed-nav-bar-using-bootstrap

Answer 1

In your css add the following to your .navbar class rule

.navbar {
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;

    /* the rest of your styling */
}

EDIT

There is an awesome online tool to generate box shadow code (thanks to the folks at cssmatic.com). You can adjust the way your shadow looks and it will generate all the code needed plus any specific browser prefixes (webkit, mozilla, etc.). You then can copy the code into your css.

http://www.cssmatic.com/box-shadow

You can also find other css effects in the same site.