Responsive Nav-bar at the Foundation?

Question

I am maintaining a site that was done with Foundation, and I really have no knowledge of this framework, because I only work with Bootsrap.

I’ve searched the Foundation documentation but I can’t find anything to solve my problem.

Problem

On the site has a <ul class="nav-bar"> and within it their respective li.
In the browser is cool, but when I go to a mobile screen or tablet or any other mobile device, this menu is to the right.

^{Note:
Changing the size of the browser window on a desktop computer to a very small size also allows you to replicate the problem.}

Code:

<ul class="nav-bar">
  <li><a href="index.php">Home</a></li>
  <li><a href="clinica.php">Clínica</a></li>
  <li><a href="hospitais.php">Hospitais</a></li>
  <li><a href="equipe.php">Equipe</a></li>
  <li><a href="dicas_links.php"> Links</a></li>
  <li><a href="localizacao.php">Localização</a></li>
  <li><a href="contato.php">Contato</a></li>
</ul>
<ul class="nav-bar pink_menu">
  <li class="has-flyout"><a href="home.php">Cirurgia Plástica</a>
    <ul class="flyout">
      <li><a href="ce_mamas.php">Mamas</a></li>
      <li><a href="ce_ccc.php">Cirurgias do Contorno Corporal</a></li>
      <li><a href="ce_rf.php">Cirurgias do Rejuvenescimento Facial</a></li>
      <li><a href="ce_outras.php">Cirurgia de outras partes da face</a></li>
      <li><a href="ce_lc.php">Cirurgias de Lifting Corporal (Cirurgias plásticas do corpo)</a></li>
      <li><a href="ce_cc.php">Cirurgias do contorno corporal após grandes perdas de peso</a></li>
      <li><a href="ce_homem.php">Cirurgias masculinas</a></li>
      <li><a href="ce_reparadoras.php">Cirurgias Reparadoras</a></li>
      <li><a href="gestante.php">Gestantes</a></li>
      <li><a href="hidrolipoaspiracao.php"> Hidrolipoaspiração</a></li>
    </ul>
  </li>
  <li class="has-flyout"><a href="home.php">Medicina estética </a>
    <ul class="flyout">
      <li><a href="proc_botox.php">Toxina Botulínica</a></li>
      <li><a href="proc_estetico.php">Preenchimento Facial</a></li>
      <li><a href="proc_peeling.php">Peelings Químicos</a></li>
      <li><a href="proc_dermo.php">Dermoabrasão</a></li>
      <li><a href="laser.php">Laser C02</a></li>
      <li><a href="skin.php">Skin Booster</a></li>
    </ul>
  </li>
  <li class="has-flyout"><a href="home.php">Procedimentos estéticos</a>
    <ul class="flyout">
      <li><a href="peel_dmt.php">Peeling de Diamante</a></li>
      <li><a href="peel_cri.php">Peeling de Cristal</a></li>
      <li><a href="limp_pele.php">Limpeza de Pele</a></li>
      <li><a href="depi_laser.php">Depilação à  laser </a></li>
      <li><a href="dren_linf.php">Drenagem Linfática Manual</a></li>
      <li><a href="estrias.php">Tratamento de Estrias</a></li>
      <li><a href="vasos.php">Escleroterapia de vasos</a></li>
      <li><a href="colageno.php">Máscara de Colágeno</a></li>
    </ul>
  </li>     
</ul>

Question

What is causing this menu behavior and what solution to keep it in the location seen in desktop browsers?

Answer 1

Your problem is that in Foundation CSS there are specific instructions for dealing with small-width screens (note: enhanced code layout for readability):

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

For some reason, the framework thought that the horizontal menu would look bad/unreadable/ugly on this type of screen, and chose to change the formatting in this case (it doesn’t look like you want, but all menu items are accessible and readable, at least).

If for any reason you still want to change the menu in this case, I suggest you tamper with the CSS, either by removing/modifying these specific instructions, or by inserting your own instructions that overload those of the framework. Alternatively, you can assign styles directly to the desired elements via Markup (attribute style) or via Javascript/jQuery (ex.: .css()).

Updating: To make the menu centered, remove the margin from your nav-bar (which at present includes 200px left - forcing content to the right - and putting it as auto. This way it will be centralized, but without a width fixed will occupy the entire width. A width fixed solves the problem:

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

Example in jsFiddle. Try increasing and decreasing the frame size Result to see the behavior.