title: Add a drop shadow to a top-fixed nav bar using Bootstrap
body: <p>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.</p>
  
  <p>Here's my HTML relating to my nav:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="brand" href="index.html"&gt;eService&lt;/a&gt;
        &lt;div class="nav-collapse"&gt;
          &lt;ul class="nav pull-right"&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                    Services
                    &lt;b class="caret"&gt;&lt;/b&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Stage Design &amp; Build&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Event Planning &amp; Management&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Video Production&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Audio Production&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Lighting Production&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;&lt;!-- dropdown --&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                    Events
                    &lt;b class="caret"&gt;&lt;/b&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Corporate Events&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Civic Events&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Charity Events&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Grand Openings&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Concerts&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;&lt;!-- dropdown --&gt;
          &lt;/ul&gt;&lt;!-- /.nav --&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;&lt;!-- /.container --&gt;
    &lt;/div&gt;&lt;!-- /.navbar-inner --&gt;
  &lt;/div&gt;&lt;!-- /.navbar --&gt;
  </code></pre>
  
  <p>And here's my CSS relating to the navbar:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Mucho love.</p>