Improve company productivity with a Business Account.Sign Up

x
?
Solved

Fade in/out Twitter Bootstrap navbar links

Posted on 2013-06-12
1
Medium Priority
?
1,943 Views
Last Modified: 2013-06-16
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!
0
Comment
Question by:Danzigger
1 Comment
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 39244760
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
Magento is the best technology for eCommerce start-ups as it offers the technical expertise and visual appeal to create a store that pulls sales and earns high ROI (Return on investment).
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question