Ir para conteúdo
  • 0

[Jquery] Navbar


Luiiiz

Pergunta

Estou tendo um problema com o menu de navegação. O mesmo em mobile, quando eu abro e fecho ele, logo após redireciono a página para o display com computador por exemplo, o menu some. A unica forma de faze-lo aparecer é atualizando a pagina, ou colocando o display da largura de um celular e abrir o menu novamente.

 

 

CSS

.nav-bar ul {
    display: block;
    text-align: right;
    padding: 0 100px 0 0;
}
 

@media screen and (max-width: 1024px)  {
    .nav-bar ul {
        padding: 10px;
        background-color: #eee;
        text-align: inherit;
        display: none;
        position: relative;
    } 
}
 

 

JQuery

 

 

$(document).ready(function(){
 
    var $btnMob = $(".btn-mob");
    var $navBar = $(".nav-bar ul");
    
    $($btnMob).click(function(e) {
        e.preventDefault;
        $($navBar).slideToggle(); 
    });
 
    $(window).resize(function(){
       if ($(window).width() >= 700) {
           $($navBar).css("display", "block !important");
       }
    });
});
Editado por Luiiiz
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
@media screen and (max-width: 1024px)  {
    .nav-bar ul {
        padding: 10px;
        background-color: #eee;
        text-align: inherit;
        display: none;
        position: relative;
    } 
}

aparentemente o problema esta aqui... 

 

display: none;

 

 

Bom, o "none" do display, neste caso tá dizendo que ele permanecerá como tal até 1024px, ou seja, ele vai ser setado como um "default". Por que se não, quando o site fosse aberto para mobile, ele já começaria aberto, que é o que não desejo. E por mais que eu tire, por exemplo. Se fechar o menu e redirecionar a largura do browser para +1024, o menu volta a desaparecer

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novos posts.
×
×
  • Criar Novo...