Ajouter une ombre portée à un haut-correction de la barre de navigation en utilisant Bootstrap

Je suis d'essayer d'ajouter une ombre portée à ma barre de navigation j'ai par Bootstrap, mais je n'arrive pas à le comprendre. Peut-être que quelqu'un peut me pointer dans la bonne direction. Toutes les autres questions que j'ai vu qui ont été posées à propos d'un sujet similaire ont incroyablement longues réponses de code désordre, mais il y a un moyen simple de le faire, n'est-ce pas le point de l'ensemble de Bootstrap, après tout.

Voici mon code HTML sur mon 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 -->

Et voici mon CSS concernant la barre de navigation:

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

Je suis conscient du fait qu'avec l'actuel px dimensions, j'ai mis pour mon ombre, il apparaît comme un bloc solide. J'ai l'intention de réglage une fois que je peux obtenir ce dang chose à travailler. Merci pour toute aide ou des pointeurs.

Mucho amour.