CODEWITHSUNDEEP
csscss-transitions
Grant J
Grant J

Reputation: 1065

CSS3 Transitions and borders

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!

Upvotes: 4

Views: 148

Answers (1)

97ldave
97ldave

Reputation: 5249

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 */
}

Upvotes: 5

Related Questions