toogle menu not returning to desktop media query

Asked

Viewed 57 times

1

I am developing a responsive menu and it works normally, when enters the media query for tablet it hides the menu and it is only possible to view it by clicking the button, but when the menu is hidden and back to desktop resolution the menu remains hidden. However if I leave the menu active on the tablet resolution and go to desktop there is the menu.

Code example :

$(document).ready(function() {
  $('button').click(function(){
    $('nav').toggle();
  });
});
* {
  outline: none;
  text-decoration: none !important;
  list-style: none;
}
nav {
  background-color: #f2f2f2;
  height: 40px;
}
ul {
  
}
li {
  width: 150px;
  display: inline-block;
}
a {
  color: black;
}
button {
  display: none !important;
}

@media screen and (max-width: 786px) {
  button {
    display: block !important;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Início</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Cadastre-se</a></li>
      </ul>
    </nav>
    <button class="btn btn-primary">Menu Responsivo</button>
  </header>
</body>

jquery css3

  • Try using fadeToggle instead of toggle

  • @Mauroalexandre continued the same way,

1 answer

1


Don’t forget to include the meta tag in the html head:

<meta name="viewport" content="width=device-width" />

The menu is enabled / deactivated with jQuery, so when deactivated at a lower resolution, it will not automatically return to desktop when resizing the screen.

If you want you can try something like this:

 @media screen and (min-width: 768px) {
     button {
         display: none;
     }
     nav {
         display: block;
     }
  }

  • Yeah, that’s kind of how I ended up solving.

Browser other questions tagged jquery css3

You are not signed in. Login or sign up in order to post.