I came across a similar problem where over a small range of browser sizes then only the "Home" option was displayed, but after reading this thread, consulting the custom.css and adjusting what was displayed in the navigation menu (I removed the News item because that reduced the overall length), then I think I have got it to work quite well.You need to ensure that you follow all the instructions in custom.css - so you have to change 3 lines to add min-width in pixels (doesn't seem to work as expected with em).
custom.css
@media only screen and (min-width: 768px)
foundation.css
.top-bar-js-breakpoint {
width: 768px !important;
visibility: hidden; }
.js-generated {
display: block; }
@media only screen and (min-width: 768px)
With these changes, it switches between horizontal and drop-down ok, with no intermediate "incorrect" version. However I've found if you have more than 768px worth of items in the menu bar then they will wrap onto the next line over a certain range of sizes, which looks pants. I reduced the number of top-level menu items to avoid this but this means I have some "grey space" on the right hand side now which isn't ideal.
I'm using the Accordion theme.