I'm currently working on developing a responsive navigation bar that collapses when the screen size is reduced. However, I seem to be encountering an issue where the only visible element after resizing the screen is the header which remains active at all times. I've tried various approaches such as removing classes and divs, but nothing seems to be resolving the problem. Any suggestions or guidance on how to tackle this challenge would be greatly appreciated. Thank you!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Header</a>
</div>
<div class="container">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Option 1</a>
</li>
<li>
<a href="#">Option 2</a>
</li>
<li>
<a href="#">Option 3</a>
</li>
<li>
<a href="#">Option 4</a>
</li>
<li>
<a href="#">Option 5</a>
</li>
<li>
<a href="#">Option 6</a>
</li>
<li>
<a href="#">Option 7</a>
</li>
</ul>
</div>
</div>
</div>
</nav>