Estou dando manutenção em um site que foi feito com o Foundation, e realmente não tenho conhecimento nenhum nesse framework, pelo fato de só trabalhar com o Bootsrap.
Já procurei na documentação do Foundation mas não achei nada que resolvesse o meu problema.
Problema
No site tem uma <ul class="nav-bar">
e dentro dela suas respectivas li
.
No navegador fica legal, mas quando vou para uma tela de celular ou tablet ou qualquer outro dispositivo móvel, esse menu fica para a direita.
Nota:
Alterar o tamanho da janela do navegador num computador desktop para um tamanho bem pequeno também permite replicar o problema.
Código:
<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>
Pergunta
O que está a causar este comportamento do menu e qual a solução para manter o mesmo no local visto nos navegadores de desktop?