Skip to main content
added 652 characters in body
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

Atualização: Para que o menu fique centralizado, remova a margem do seu nav-bar (que no momento inclui 200px à esquerda - forçando o conteúdo para a direita - e coloque-a como auto. Dessa forma ficará centralizado, mas sem um width fixo ocupará a largura inteira. Um width fixo resolve o problema:

@media only screen and (max-width: 767px) {
    .nav-bar {
        width: 300px;
        margin:0px auto;
    }
}

Exemplo no jsFiddle. Experimente aumentar e diminuir o tamanho do frame Result para ver o comportamento.

Atualização: Para que o menu fique centralizado, remova a margem do seu nav-bar (que no momento inclui 200px à esquerda - forçando o conteúdo para a direita - e coloque-a como auto. Dessa forma ficará centralizado, mas sem um width fixo ocupará a largura inteira. Um width fixo resolve o problema:

@media only screen and (max-width: 767px) {
    .nav-bar {
        width: 300px;
        margin:0px auto;
    }
}

Exemplo no jsFiddle. Experimente aumentar e diminuir o tamanho do frame Result para ver o comportamento.

added 88 characters in body
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

O seu problema é que no CSS do foundationFoundation existem instruções específicas para lidar com telas de largura pequena (nota: layout do código aprimorado para legibilidade):

/* 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; } 
}

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; } 
}

O seu problema é que no CSS do Foundation existem instruções específicas para lidar com telas de largura pequena (nota: layout do código aprimorado para legibilidade):

/* 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; } 
}
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

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()).