CSS3 Transitions and borders

css, css-transitions

Solution

This is causing the problem:

.nav > li > a {
    display: block;
}

which is coming from bootstrap.css If you remove that bit of CSS it works correctly.

You can override that style in index2.php by adding `display: inline;`:

.navbar a, .navbar a:active, .navbar a:visited {
    color: #7f7f7f;
    padding-top: 35px;
    height: 90px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 45px;
    display: inline;         /* added this line */
}

Problem

I'm trying to reverse engineer the menu on this web page (this is just a personal project, not trying to steal their work). http://clapat.ro/themes/eleven/color/ However, I can't seem to get the transition effect to work. When I add the border-top on, it's pushing the content of the down instead of staying nicely in-line like in the example. Also, the border seems to "blind" upwards, but when I do it, it blinds downwards. Any help would be greatly appreciated!

Original source