Fix Nav Bar Using Bootstrap with the Shadow at the Bottom

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
         data-target="#example-navbar-collapse">
         <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="#">eService</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <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="#">Service1</a></li>
              <li><a href="#">Service2</a></li>
              <li><a href="#">Service3</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="#">Event1</a></li>
              <li><a href="#">Event2</a></li>
              <li><a href="#">Event3</a></li>
              <li><a href="#">Event4</a></li>
              <li><a href="#">Event5</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
   </div>
</div>

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