Menu icon Foundation
top-bar-right with dropdown no good in F6???? Help

Screen shot 2016 01 10 at 10.34.24 am

Screen shot 2016 01 10 at 10.34.55 am

I would like to do is have top bar, with a menu on the right. Very simple, and I know this is possible in Foundation5, but it does not appear that in Foundation6 this is possible. The last element in a right aligned menu in the top bar CAN NOT be a dropdown as far as i can tell. All the docs and examples have the last item in top-bar-right as a link... this is super lame if this is true. please help thank you!

top bartop-righttop-bar-right

Screen shot 2016 01 10 at 10.34.24 am

Screen shot 2016 01 10 at 10.34.55 am

I would like to do is have top bar, with a menu on the right. Very simple, and I know this is possible in Foundation5, but it does not appear that in Foundation6 this is possible. The last element in a right aligned menu in the top bar CAN NOT be a dropdown as far as i can tell. All the docs and examples have the last item in top-bar-right as a link... this is super lame if this is true. please help thank you!

Rafi Benkual almost 4 years ago

There is built in logic to make sure the menu does not bleed off the screen. This is likely why you see the spacing there.

This codepen shows how it can work.
http://codepen.io/zurbchris/pen/rxMaoX

Looks like adding the .align-right class handles this:

<ul class="dropdown menu align-right" data-dropdown-menu>

A little CSS ensures that the float stays on the correct side:

.dropdown.menu li {
  float: left;
}

I'd say this is a simple use case the dropdown menu should handle without extra CSS. It would be helpful if you can try what I suggested above and based on what you find, open a itHub issue suggesting the improvement. Thanks!