Fade in/out Twitter Bootstrap navbar links

Hi

I have a Twitter Bootstrap navbar in place with rollover background color change on the links - all good.

I'd like the rollover background color to fade in on rollover and fade out on rollout. (Instead of the default instant change to the background color on rollover/out.)  What's the best way to achieve this?

Thanks!
DanziggerAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
In the stylesheet add a rule that targets the elements of the navbar with a class:

.nav-fade li {
   background: #fff;
   padding: 3px 8px;
   display: inline-block;
   -moz-transition: background 1s ease-in-out;
   -webkit-transition: background s ease-in-out;
    transition: background 1s ease-in-out;
   }

   .nav-fade li:hover {
      background: #ddd;
      }

Open in new window


Cd&
0
All Courses

From novice to tech pro — start learning today.