How to change the box-shadow of twitter-bootstrap navbar?

Question

I'm using twitter-bootstrap, and I have the following code to generate a navbar with box-shadow, based in this post :

Here is a working fiddle with the effect1: http://jsfiddle.net/X4drb/15/

But if I try to use the effect2 instead, does not displayed the shadow: http://jsfiddle.net/X4drb/16/

CSS

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

HTML

<nav class="navbar navbar-default effect1">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  <i class="fa fa-bars"></i>
            </button> <a class="navbar-brand" href="index.html"><img src="http://placehold.it/30x30&text=logo" ></a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Hello</a>
                </li>
                <li><a href="#">Stack</a>
                </li>
                <li><a href="#">Overflow</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Why the first effect works perfectly, and the second one doesnt? What am I missing? Do you have any idea to do it?

Answer 1

Size is very small menu to display shadows. In the style you need to change the value on the bottom until you see the shadow and add display:block for .effect2:before, .effect2:after