I've been encountering issues with my navbar. Whenever I try to collapse it after clicking on one of the options, it gets stuck and can only be fixed by refreshing the page.
Here is the html code used for the page:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/Style.css">
</head>
<body>
<div class="">
<header>
<nav class="navbar navbar-inverse" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Ans Dashboard</a>
</div>
<div class="collapse navbar-collapse text-center" id="navbar-1">
<ul class="nav navbar-nav">
<li class="" data-target="customer_main"><a href=""><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></a></li>
<li class="" data-target="inventorypage"><a href=""><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></a></li>
<li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></a></li>
<li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></a></li>
</ul>
<div class="navbar-right text-center">
<ul class="nav navbar-nav">
<form method="post" class="nav navbar-nav">
<li><p class="navbar-text"><?php echo "Welcome"?><p></li>
<li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?>
<?php
include("logout.php");
?>
</button></li>
</form>
</ul>
</div>
</div>
</div>
</nav>
</header>
</div>
<!-- end of navbar-->
<div id="content">
<!-- Js page loads here -->
</div>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/mainpage.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
This is the javascript responsible for loading pages when the navbar area is clicked (mainpage.js)
$(document).ready(function()
{
var trigger = $('#navbar-1 ul li'), container = $('#content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
UPDATE: The issue has been resolved, as it was related to the structure of the loaded pages.