O seu problema é que no CSS do foundation existem instruções específicas para lidar com telas de largura pequena:
/* Mobile Styles */
@media only screen and (max-device-width: 1280px) { .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } }
@media only screen and (max-width: 1279px) and (min-width: 768px) { .touch .nav-bar li a { font-size: 13px; font-size: 1.3rem; }
.touch .nav-bar li.has-flyout > a.flyout-toggle { padding: 20px !important; }
.touch .nav-bar li.has-flyout > a { padding-right: 36px !important; }
}
@media only screen and (max-width: 767px) { .nav-bar { height: auto;margin-top: 20px; margin-bottom: 20px; float:none; }
.nav-bar > li { height:auto; padding:0px; text-align: center;float: none; display: block; border: none; border-bottom: solid 1px gray; line-height: 33px; border-radius: none;}
.nav-bar > li:first-child{border-bottom-left-radius:0px;-moz-border-bottom-left-radius:0px;-webkit-border-bottom-left-radius:0px; }
.nav-bar > li:last-child{border-bottom-right-radius:0px;-moz-border-bottom-right-radius:0px;-webkit-border-bottom-right-radius:0px; }
.nav-bar > li > a:first-child {position: relative; padding: 0px; display: block; text-decoration: none; font-size: 14px; }
.nav-bar > li > a { height: auto; color: #ffac4b; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; padding:0px;}
.nav-bar > li:last-child{border: none;}
.nav-bar > li > a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
.nav-bar > li:first-child > a.main { border-top: none; }
.nav-bar > li.has-flyout > a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
.nav-bar > li.has-flyout > a.flyout-toggle:hover span { border-top-color: #141414; }
.nav-bar.vertical > li.has-flyout > .flyout { left: 0; }
.flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; }
.flyout.right { float: none; right: auto; left: -1px; }
.flyout.small, .flyout.large { width: 100% !important; }
.flyout p:last-child { margin-bottom: 18px; }
}
Por alguma razão, a framework achou que o menu horizontal ficaria ruim/ilegível/feio nesse tipo de tela, e optou por mudar a formatação nesse caso (não fica como você quer, mas todos os itens do menu ficam acessíveis e legíveis, pelo menos).
Se você por qualquer razão ainda quiser mudar o menu nesse caso, sugiro mexer no CSS, seja removendo/modificando essas instruções específicas, seja inserindo suas próprias instruções que sobrecarregem as da framework. Alternativamente, você pode atribuir estilos diretamente aos elementos desejados, via markup (atributo style
) ou via JavaScript/jQuery (ex.: .css()
).