Navbar CSS not properly displaying hover functions and menu items

Question

Previously I have asked a question about how to make hover border appear on menu items without re sizing image here and one of the member gave me a solution which works with what I want. But recently I have been noticing a glitch in my navbar where by when hovering on menu items it causes the item to slightly flicker. Additional to that, subsequent menu items are not displaying inline, which appears to be floating on top. I have tried v-align="middle" but it does not seem to be working. The problem became worse when I browse with internet explorer. What I am trying to achieve is something like Twitter's navbar which when someone hovers over a menu item, a border will appear below the item.

Here is my JSFiddle file to my sample code.

Thank You

@MattHammond I have tried in my side, Chrome and Mozilla when hover over the company logo it sorts of buzzed a little (if you notice carefully, i can say its abut 2px movement), and when i use Mozilla and IE, the border that appears below the icons are way longer than the icon itself (even worse in IE), finall for all 3 browsers, the following menu items seems to be v-align="top" but instead it want it to be in middle. — Kenny Yap, Jun 17 '15 at 02:32
That strange, on safari mac it works perfectly but the others I see your problem, sorry to say I'm not sure whats causing it :( — Matt Hammond, Jun 17 '15 at 02:37
@MattHammond yea i realized that too. Hopefully someone can help :( — Kenny Yap, Jun 17 '15 at 02:38
I want to know do you want the navBar inside the blue bar horizontally or the same place outside the blue bar vertically? — Mohammed Moustafa, Jun 17 '15 at 02:39
@MohammedMoustafa im sorry how do you mean by that? What I need is all the menu items in the navbar should be vertically aligned in the center... — Kenny Yap, Jun 17 '15 at 02:56
http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar — Mohammed Moustafa, Jun 17 '15 at 03:56

score 2 · Accepted Answer · answered Jun 17 '15 at 03:48

If you want to find something like Twitter's navbar, then the best way is to see how they do? I did this for you :) In the Twitter's navbar, the transition is made on the height and not on the border. Evidently animate the borders and paddings at same time can result in poor animation, as you have seen.

Check this minimal example build with your own code: https://jsfiddle.net/yxmgehyt/4/

And here is the relevant CSS code which I used:

.nav{
    height: 50px;
    overflow: hidden;
}

.nav li{
    float: left;
}

.nav li a{
    height: 55px;
    border-bottom: 5px solid #6666CC;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
}

.nav li a:hover{
    height: 50px;
}

Note: Another possible solution can be using pseudo-selectors (:before and :after).

@lmgonzalves your code works like a charm for me and i glad that you have pointed me towards the right direction. I guess I would have some decent skills to do any further modifications. Once again thanks mate :) — Kenny Yap, Jun 17 '15 at 06:32

Navbar CSS not properly displaying hover functions and menu items

1 Answers1