Menu icon Foundation
FoundationPress Navigation Border Transition

I am trying to create a bottom-border left to right hover transition for the navigation items.

Example: http://jsfiddle.net/samliew/QUMgy/

 

I am using the standard navigation menu setup that comes with Foundationpress with very little changes.

I just cant seem to get the right bits in the right place.

I can get the animation to work but as the menu items are different lengths, they get pushed around.

 

Any help at all will be much appreciated!

 

Cheers,

Kieran

foundationPressbordertransitionhoveranimationmenunavigationborder-bottom

I am trying to create a bottom-border left to right hover transition for the navigation items.

Example: http://jsfiddle.net/samliew/QUMgy/

 

I am using the standard navigation menu setup that comes with Foundationpress with very little changes.

I just cant seem to get the right bits in the right place.

I can get the animation to work but as the menu items are different lengths, they get pushed around.

 

Any help at all will be much appreciated!

 

Cheers,

Kieran

santosa hw over 2 years ago

try to delete item:  width: 80px;   on css .menuitem

Kieran Roberts over 2 years ago

Thanks for the reply but I have tried that and a million other ways and it works for simple navigation menus no problem, but I can't seem to get it working smoothly in FoundationPress.

The biggest thing I am struggling with is not being able to edit the HTML.

Thanks again for your reply.