CODEWITHSUNDEEP
jquery
Anna_B
Anna_B

Reputation: 890

Undo jQuery function if window size changes

I have here this jQuery function:

$("#show-nav").click(function() {
  $("nav").toggle();
});
nav {
  display: block;
}

#show-nav {
  display: none;
}

@media screen and (max-width: 700px) {
  nav {
    display: none;
  }
  #show-nav {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="show-nav">Show navigation</div>

<nav>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Thre</li>
  </ul>
</nav>

This navigation should have a toggle function on small screens. So I worked with @media screen and hid it for screen sizes under 700px.

The Problem: If you hide the navigation in the under 700px area, and resize then the browser window larger, the navigation is still invisible.

Is there a possibility to undo jQuery actions with resizing the browser window?

Upvotes: 0

Views: 57

Answers (1)

Angrej Kumar
Angrej Kumar

Reputation: 958

You need to add css code which will always show the navigation if the browser is more than 700px. So you could use the below code:

@media screen and (min-width: 701px) {
    nav { display: block !important }
}

If you still face issues implementing this. Please edit your question with providing full code along with HTML, CSS and jQuery. I would definitely help further.

Upvotes: 1

Related Questions