Difficulty positioning objects after @media (max-width: 320px) {

Question

Where am I going wrong?

I have the html down below

    <script type="text/javascript" src="_global/_funcoes/_js/jquery-2.1.4.min.js"></script>

<button class="menuAbrir"><img  src="_img/btn-menu.png" width="50px;" title="Abrir Menu" /></button>
<nav class="menuNav">
  <a class="menuFechar"><img  src="_img/btn-close.png" width="30px;" title="Abrir Menu" /></a><br>
  <ul class="menuUlTopo">
    <li class="menuTopo"><a href="principal.php" title="Principal">Principal</a></li>
    <li class="menuTopo"><a href="administradoresMenu.php" title="Administradores">Administradores</a></li>
    <li class="menuTopo"><a href="clientesMenu.php" title="Clientes">Clientes</a></li>
    <li class="menuTopo"><a href="imoveisMenu.php" title="Imóveis">Imóveis</a></li>
    <li class="menuTopo"><a href="tiposMenu.php" title="Tipos de Imóveis">Tipos de Imóveis</a></li>
    <li class="menuTopo"><a href="emails.php?acao=listar" title="E-mails">E-mails</a></li>
  </ul>
</nav>

<script>
$(document).ready(function(e){
  $(".menuAbrir").click(function() {
    $(".menuNav").show();
    $(".menuFechar").show();
  });

  $(".menuFechar").click(function() {
    $(".menuNav").hide();
    $(".menuAbrir").show();
  });
});
</script>

The idea here is that when it comes to the resolution of 320px x 480px and just until she, a button appears. Until then ok.

The problem now is that there is <button class="menuAbrir"> and <nav class="menuNav">

I’m having trouble positioning the botão in top:0 and left:0 nor the <nav class="menuNav"> in top 0.

But I can design the <nav class="menuNav"> as 100% of the screen by width, but heigth does not.

Here is the css:

.menuAbrir {
     display:none;
}

.menuNav {
      display:block;
}

.menuFechar {
    display:none;
}

@media (max-width: 320px) {
 .menuAbrir {
     display:block;
     width:60px;
     height:60px;
     top:0;
 }

 .menuNav {
      display:none;
      position:fixed;
      top: 0;
      left:0;
      width: 100%;
      height:100%;
  }

  ul li.menuTopo a {
      width: 320px;
      height: 480px;
  }

  .menuFechar {
      float:right;
      cursor:pointer;
  }
}

Where am I going wrong?

Answer 1

Well, in jQuery you need to put code inside the ready:

  $(document).ready(functional(e){
// seu código
});

Try this, if the answer serve give a up.