0

Estou fazendo um site responsivo quando me deparei com um problema, no layout para tablet o menu fica escondido para quando apertar o botão ele aparecer fazendo um slide, mas o cliente quer que o logo apareça em cima antes dos outros menus. No layout para pc o logo é o 3 list-tem contando com o item 0. Estou querendo mudar a hierarquia usando jquery, mas não estou conseguindo, alguem poderia me ajudar? Obrigado

HTML:

    <nav class="nav">
            <ul>
                <li><a href="#"><img class="lupa" src="img/lupa.png" alt="Pesquisar" onClick="MostrarCampoPesquisa()"></a>
                  <div id="caixaPesquisa">
                        <form id="formPesquisa" action="" method="get">
                            <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar..." onBlur="EsconderCampoPesquisa()">
                        </form>
                  </div>
                </li>
                <li><a href="#">Página Inicial</a></li>
                <li><a href="#">Produtos<img class="flechaVertical" src="img/flecha.png" alt="flecha"></a>
                    <ul>
                        <li><a href="#">Aparadores de Livros</a></li>
                        <li><a href="#">Caixinhas</a></li>
                        <li><a href="#">Chaveiros</a></li>
                        <li><a href="#">Decoração</a></li>
                        <li><a href="#">Pontos Turísticos</a></li>
                        <li><a href="#">Porta Celulares</a></li>
                        <li><a href="#">Porta Guardanapos</a></li>
                        <li><a href="#">Porta Retratos</a></li>
                        <li><a href="#">Relógios</a></li>
                        <li><a href="#">Topos De Bolos</a></li>
                        <li><a href="#">Veículos</a></li>
                    </ul>
                </li>
                <li><a href="#"><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
                <li><a href="#">Dúvidas</a></li>
            </ul>
        </nav>

CSS:

#caixaPesquisa{
    padding-left:15px;  
}

#pesquisa{
    width:160px;
    height:50px;
    margin-left:10px;
    display:none;
    position:absolute;
    text-align:center;
    border:1px solid #222222;   
}

/* -------------------------------*/

/* Navigation Menus */

.lupa{
    width:30px;
    height:30px;    
}

.flechaVertical{
    width:8px;
    height:8px;
    padding-left:5px;   
}

.navLogo{
    width:160px;
    height:90px;    
}

.nav{
    width: 100%;
    margin: 0;
    text-align: left;
    background-color: #FFFFFF;
    position: fixed;
}

.nav ul{    
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}

.nav ul li{
    display:inline-block;
}

.nav ul li a,visited{
    color:#000000;
    display:block;
    padding:10px;
    padding-left:85px;
    text-decoration:none;
}

.nav ul li a:hover{
    color:#990000;
    text-decoration:none;
}

1 Resposta 1

1

Você pode manipular o dom nesse caso, utilizando o remove() para remover a logo do terceiro lugar e o insertBefore para inserí-la de novo. Para detectar se está sendo acessar de uma tela de mobile no seu código, utilize o método width do elemento jQuery Window.

Vou deixar um exemplo abaixo, clique em executar trecho do código, ver página toda e redimensione a tela para ver seu efeito:

$logo = $("ul li").eq(3);
function positionLogo(){
  if($(window).width() < 480){ //se a tela for menor que 480 px
    $logo.remove().insertBefore("ul li:first-child"); //insiro logo no começo
  }
  else{                             //senão
    $logo.remove().insertAfter("ul li:nth-child(2)"); //insiro logo como terceiro item
  }
}
$(document).ready(positionLogo);
$(window).resize(positionLogo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> Item 0 </li>
  <li> Item 1 </li> 
  <li> Item 2 </li>
  <li> Logo <img width="50"src="http://www.skrenta.com/images/stackoverflow.jpg"></li>
</ul>

3
  • Obrigado ajudou muito! Commented 3/05/2016 às 1:03
  • Se já estiver algum css antes, isso pode fazer com que o jquery não funcione? Commented 4/05/2016 às 0:08
  • Olha, acho que é muito raro o css impedir o jquery nesse caso.
    – LF Ziron
    Commented 4/05/2016 às 11:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .