Trying to add shading to selected Bootstrap 3 Navbar - html

Question

I made a Navbar with Bootstrap 3. My questions is how to have it be shaded when selected?
Everything works fine otherwise. I believe it required some JavaScript, but I don't know how to implement it.
This is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family:Webdings;">
<%= link_to "lalala", root_path, class: 'navbar-brand' %>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "laaa", lal_path %></li>
<li class="dropdown">
lala<b class="caret"></b>
<ul class="dropdown-menu">
<li><%= link_to "lala", laa_path %></li>
<li><%= link_to "lalala", lala_path %></li>
<li><%= link_to "lalala", lala_path %></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Follow #lalala
</li>
<li>
<div class="fb-like" data-href="lalala" data-width="600" data-layout="button_count" data-show-faces="true" data-send="false"></div>
</li>
<li><%= link_to "lala", contact_path %></li>
<li><%= link_to "lalalala", register_path %></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>

Answer 1

CSS3 is all you need! Go here: http://css3generator.com/. After you generate the shadow, gradient or text shadow you like, apply that css3 chunk of code to the element by adding :active selector. See here for :active selector: http://www.w3schools.com/cssref/sel_active.asp
NB: :active MUST come after :hover (if present) in the CSS definition in order to be effective!