Nav-bar responsive at the Foundation?

Navigation
7

I'm giving maintenance to a site that was made with Foundation, and I really do not know anything about this framework, because I only work with Bootsrap.

I already looked in the Foundation documentation but found nothing that solved my problem.

Problem

The site has a <ul class="nav-bar"> and within it its li . In the browser it looks cool, but when I go to a mobile or tablet screen 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 is the solution for keeping it in place in desktop browsers?

    
asked by anonymous 09.01.2014 / 22:35

1 answer

4

Your problem is that in Foundation CSS there are specific instructions for handling small-width screens (note: improved 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 felt that the horizontal menu would look bad / unreadable / ugly on this type of screen, and chose to change the formatting in that case (it does not stay the way you want it to, but all menu items are accessible and readable , at least).

If you for some reason still want to change the menu in this case, I suggest to tweak 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 elements you want, via markup ( style attribute) or via JavaScript / jQuery (eg .css() ).

Update: In order for the menu to be centered, remove the margin of your nav-bar (which currently includes 200px on the left - forcing content to the right - and place it as auto This will be centralized, but without a width fixed it will occupy the entire width. width fixed fixes 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.

    
09.01.2014 / 22:59
filter in dplyr using a categorical variable How important is it really to validate codes by the W3C?