CSS3 Transitions and Borders

Question

I am trying to redesign the menus on this web page (this is just a personal project, not trying to steal their work).

http://clapat.ro/themes/eleven/color/

However, I cannot get the transition effect to work. When I add the top edge, it pushes the content down, instead of remaining beautiful in the line, as in the example.

In addition, the border seems to be “blind” up, but when I do this, it dazzles down.

Any help would be greatly appreciated!

Answer 1

This causes a problem:

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

which comes from bootstrap.css If you remove this CSS bit, it works correctly.

You can override this 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 */ }