3

Bom dia, estou tentando fazer um menu responsivo para meu portfólio, estou usando o do materialize mas quando coloco ele fixo o side-nav da versão mobile buga, fica todo escuro e não da para clicar nos itens, aqui está a imagem de como fica quando está com a classe navbar-fixed

Side nav fixo

e aqui está uma imagem para mostrar como funciona normalmente sem colocar ele fixo

navbar não fixo

para fazer este menu eu assisti este vídeo: 2.- Tutorial Materialize: NAVBAR do canal Brajan Montes Perez no youtube, não coloquei o link pq se não não tem como colocar o código html

meu código aqui (retirei o corpo)

menulateral

<link rel="stylesheet" href="css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons"     rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<div class="row">

  <div class="navbar-fixed">
    <nav>
            <div class="nav-wrapper grey darken-1">
                <a href="#!" class="brand-logo">Eduardo Moya Simões</a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="">Início</a></li>
                    <li><a href="">Habilidades</a></li>
                    <li><a href="">Portifólio</a></li>
                    <li><a href="">Currículo</a></li>
                    <li><a href="">Contato</a></li>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <li><a href="">Início</a></li>
                    <li><a href="">Habilidades</a></li>
                    <li><a href="">Portifólio</a></li>
                    <li><a href="">Currículo</a></li>
                    <li><a href="">Contato</a></li>
                </ul>
            </div>
    </nav>
  </div>
   <script src="js/jquery-3.1.1.js"></script>
   <script src="js/materialize.min.js" ></script>
   <script type="text/javascript">
      $(document).ready(function(){
      $('.parallax').parallax();
    });
   </script>
   <script>
     $( document ).ready(function(){
     $(".button-collapse").sideNav();
   })
 </script>

6 Respostas 6

1

Acontecia a mesma coisa para mim e descobri q é por causa do z-index da classe .navbar-fixed. Para resolver apenas insira em seu css:

.navbar-fixed {
  z-index: 998;
}
0

Porque está usando 2 ready(function)??

Tente fazer assim:

<script>
$(document).ready(function(){
  $(".button-collapse").sideNav();
  $('.parallax').parallax();
});
</script>
1
  • não deu não, mas vlw Commented 20/03/2017 às 18:31
0

 <ul class="side-nav" id="mobile-demo">
    <li><a href="">Início</a></li>
    <li><a href="">Habilidades</a></li>
    <li><a href="">Portifólio</a></li>
    <li><a href="">Currículo</a></li>
    <li><a href="">Contato</a></li>
</ul>

Você deve apenas colocar o código abaixo depois da div com a classe "navbar-fixed":

  • Início
  • Habilidades
  • Portifólio
  • Currículo
  • Contato
    0

    Aqui estava bugando também, eu resolvi tirando a ancora da ação de dentro do nav, o meu ficou assim.

        <nav>
            <div class="nav-wrapper grey darken-1">
                <a href="#!" class="brand-logo">Eduardo Moya Simões</a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="">Início</a></li>
                    <li><a href="">Habilidades</a></li>
                    <li><a href="">Portifólio</a></li>
                    <li><a href="">Currículo</a></li>
                    <li><a href="">Contato</a></li>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <li><a href="">Início</a></li>
                    <li><a href="">Habilidades</a></li>
                    <li><a href="">Portifólio</a></li>
                    <li><a href="">Currículo</a></li>
                    <li><a href="">Contato</a></li>
                </ul>
            </div>
        </nav>  
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    

    Não sei porque isso acontece, mas pelo menos aqui resolveu, porém depois tive que reposicionar a âncora da ação

    0

    Tem que definir um z-index menor para o sidenav-overlay em relação ao sidenav (obs: o nome das classes podem mudar de acordo com a versão do materializecss).

    Inspecione o sidenav e anote seu z-index, mude no seu custom css, ou até no próprio css do materialize, o z-index do sidenav-overlay para que seja menor que o sidenav em si.

    0
    0

    Tive que alterar o z-index no CSS para -1

    .sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
    display: none;
    

    }

    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 .