O seu problema é que no CSS do foundation existem instruções específicas para lidar com telas de largura pequena: <!-- language: lang-css --> /* 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()`][1]). [1]: http://api.jquery.com/css/