I have designed a custom menu in HTML:
<div class="trigger" style="display:none;">menu</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
After applying some CSS code to make it responsive, I ensured that the navigation menu is hidden at 400px window width and appears only when clicked on the button. Everything is functioning well.
However, a challenge arises when I hide the menu by clicking on it at 400px and then resize the window to higher dimensions. The navigation menu remains hidden in this scenario.
For demonstration, refer to this example: http://jsfiddle.net/b6pdy89u/
I am seeking advice on the best approach to create and manage this navigation menu effectively.