SB Admin 2 Navbar doesn't collapse anymore after delete some content
Question
After editing the SB Admin 2 bootstrap template, the sideNavbar doesn't collapse anymore. I've just deleted some graphs and timelines, and this happened. I've already seen some solutions here on stackoverflow, but nothing was useful. This is the code of the page, i just removed some modals in order to be able to post here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-dashboard"></span> Admin Dashboard</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul style="padding-top:0px" class="dropdown-menu dropdown-alerts">
<li>
<div class="panel panel-default" style="margin:0px">
<div class="panel-heading">
<i class="fa fa-user fa-fw"></i> Last Registrations
</div>
</div>
</li>
<li style="margin-top:0px" class="divider"></li>
<?php
$query_registrations="SELECT username,reg_date,status FROM User ORDER BY reg_date DESC LIMIT 5;";
$ris_queryregistrations=mysqli_query($conn,$query_registrations);
while($rows_queryregistrations=mysqli_fetch_array($ris_queryregistrations)){
echo'<li>
<a href="#">
<div>';
if($rows_queryregistrations['status']=='online')
echo' <span class="label label-success"> '.$rows_queryregistrations['username'].' </span>';
else
echo' <span class="label label-danger"> '.$rows_queryregistrations['username'].' </span>';
echo'
<span class="pull-right text-muted small"> '.$rows_queryregistrations['reg_date'].'</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
';
}
?>
<a class="text-center" href="Users.php">
<strong>See All Users</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-registrations -->
</li>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
</li>
<li>
<a href="#"><i class="fa fa-check"></i> Online Users <?php $nOnlineUsers=getNOnlineUsers($conn); echo"<span class='label label-success'>$nOnlineUsers</span>";?></a>
<ul class="nav nav-second-level">
<?php
$onlineUsers=getOnlineUsers($conn);
while($rows_OnlineUsers=mysqli_fetch_array($onlineUsers)){
echo'
<li>
<a href="#"><i class="fa fa-check"></i> <span class="label label-success"> '.$rows_OnlineUsers['username'].'</span></a>
</li>';
}?>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-wrench"></i> Online Admins <?php $nOnlineAdmins=getNOnlineAdmins($conn); echo"<span class='label label-primary'>$nOnlineAdmins</span>";?></a>
<ul class="nav nav-second-level">
<?php
$onlineAdmins=getOnlineAdmins($conn);
while($rows_OnlineAdmins=mysqli_fetch_array($onlineAdmins)){
echo'
<li>
<a href="#"><i class="fa fa-wrench"></i> <span class="label label-primary"> '.$rows_OnlineAdmins['username'].'</span></a>
</li>';
}?>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="../../index.php"><i class="fa fa-home"></i> Home</a>
</li>
<li>
<a href="index.php"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<a href="#"><i class="fa fa-user"></i> Users<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#" data-toggle="modal" data-target="#addUser"><i class="fa fa-plus"></i> Add User</a>
</li>
<li>
<a href="Users.php"><i class="fa fa-wrench"></i> Manage Users <span class="badge"><?php $nUsers=nRegisteredUsers($conn); echo" $nUsers"?></span></a>
</li>
<li>
<a href="seeLogins.php"><i class="fa fa-sign-in"></i> Logins <span class="badge"><?php $nLogins=nLogins($conn); echo" $nLogins"?></span></a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-link"></i> Links<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#" data-toggle="modal" data-target="#addLink"><i class="fa fa-plus"></i> Add Link</a>
</li>
<li>
<a href="Links.php"><i class="fa fa-wrench"></i> Manage Links <span class="badge"><?php $nlinks=nLinks($connh); echo" $nlinks"?></span></a>
</li>
<li>
<a href="reportedLinks.php"><i class="fa fa-warning"></i> Reported Links <?php $nReportedLinks=nReportedLinks($connh); if($nReportedLinks!=0)echo"<span class='label label-danger'>$nReportedLinks</span>";?></a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-tasks"></i> Categories<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#" data-toggle="modal" data-target="#addCategory"><i class="fa fa-plus"></i> Add Category</a>
</li>
<li>
<a href="Categories.php"><i class="fa fa-wrench"></i> Manage Categories <span class="badge"><?php $nCategories=nCategories($connh); echo" $nCategories"?></span></a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-user fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$regUsers=nRegisteredUsers($conn);
echo'<div class="huge">'.$regUsers.'</div>'; ?>
<div>Registrated Users!</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#RegUModal">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal Registrations-->
<div id="RegUModal" class="modal fade" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Registrated Users</b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-user"></i> Username</b></td>
<td class="text-center"><b><i class="fa fa-calendar"></i> Registration Date</b></td>
<td class="text-center"><b><i class="fa fa-clock-o"></i> Registration Time</b></td>
</tr>
</thead>
<tbody>
<?php
$registrations="SELECT username,DATE(reg_date) AS Date, TIME(reg_date) AS Time,status FROM User ORDER BY Date DESC,Time DESC;";
$query_registrations=mysqli_query($conn,$registrations);
while($rows_registrations=mysqli_fetch_array($query_registrations)){
echo'<tr>';
if($rows_registrations['status']=='online')
echo'<td class="text-center"><span class="label label-success">'.$rows_registrations['username'].'</span></td>';
else
echo'<td class="text-center"><span class="label label-danger">'.$rows_registrations['username'].'</span></td>';
echo'<td class="text-center"><span class="label label-info">'.$rows_registrations['Date'].'</span></td>';
echo'<td class="text-center"><span class="label label-info">'.$rows_registrations['Time'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal Registrations -->
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$onlineUToday=nUsersToday($conn);
echo'<div class="huge"> '.$onlineUToday.'</div>'; ?>
<div>Users Today!</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#OnlineUsers">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal OnlineUsers-->
<div id="OnlineUsers" class="modal fade" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Online Users Today <?php echo'<span class="label label-info"> '.date("d/m/y").' </span>'; ?></b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-user"></i> Username</b></td>
<td class="text-center"><b><i class="fa fa-clock-o"></i> Last Log Time</b></td>
</tr>
</thead>
<tbody>
<?php
$onlineuserstoday="SELECT DISTINCT User.username,status,TIME(MAX(log_time)) as Time from login,User where DATE(curdate()) = DATE(log_time) AND User.username=login.username GROUP BY User.username,status;";
$query_onlineuserstoday=mysqli_query($conn,$onlineuserstoday);
while($rows_onlineuserstoday=mysqli_fetch_array($query_onlineuserstoday)){
echo'<tr>';
if($rows_onlineuserstoday['status']=='online')
echo'<td class="text-center"><span class="label label-success">'.$rows_onlineuserstoday['username'].'</span></td>';
else
echo'<td class="text-center"><span class="label label-danger">'.$rows_onlineuserstoday['username'].'</span></td>';
echo'<td class="text-center"><span class="label label-info">'.$rows_onlineuserstoday['Time'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal OnlineUsers -->
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$ncategories=nCategories($connh);
echo'<div class="huge">'. $ncategories.'</div>'; ?>
<div>Categories</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#Categories">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal OnlineUsers-->
<div id="Categories" class="modal fade" role="dialog"><div class="modal-dialog modal-lg"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Categories</b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-tasks"></i> Name</b></td>
<td class="text-center"><b><i class="fa fa-book"></i> Description</b></td>
</tr>
</thead>
<tbody>
<?php
$getCategories="SELECT NameCategory,Description FROM Category ORDER BY NameCategory ASC;";
$query_getCategories=mysqli_query($connh,$getCategories);
while($rows_getCategories=mysqli_fetch_array($query_getCategories)){
echo'<tr>';
echo'<td class="text-center"><span class="label label-info">'.$rows_getCategories['NameCategory'].'</span></td>';
echo'<td class="text-center" style="word-break:break-all;"><span class="label label-default">'.$rows_getCategories['Description'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal Categories -->
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-link fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$nlinks=nLinks($connh);
echo'<div class="huge">'.$nlinks.'</div>'; ?>
<div>Links</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#Links">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal OnlineUsers-->
<div id="Links" class="modal fade" role="dialog"><div class="modal-dialog modal-lg"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Links</b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-link"></i> Name</b></td>
<td class="text-center"><b><i class="fa fa-book"></i> Description</b></td>
</tr>
</thead>
<tbody>
<?php
$getLinks="SELECT url,name,description FROM Link ORDER BY name ASC;";
$query_getLinks=mysqli_query($connh,$getLinks);
while($rows_getLinks=mysqli_fetch_array($query_getLinks)){
echo'<tr>';
echo'<td class="text-center"><a href="'.$rows_getLinks['url'].'"><span class="label label-info">'.$rows_getLinks['name'].'</span></a></td>';
echo'<td class="text-center" style="word-break:break-all;"><span class="label label-default">'.$rows_getLinks['description'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal Links -->
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-8">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-warning fa-fw"></i> Reported Links <?php $nReportedLinks=nReportedLinks($connh); if($nReportedLinks!=0) echo'<span class="label label-danger">'.$nReportedLinks.'</span>'; ?>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="list-group">
<?php
$reportedlinks="SELECT name,time FROM Link,reported WHERE Link.url=reported.url ORDER BY time DESC LIMIT 5;";
$query_reportedlinks=mysqli_query($connh,$reportedlinks);
while($rows_reportedlinks=mysqli_fetch_array($query_reportedlinks)){
echo'<a href="#" class="list-group-item">
<i class="fa fa-link fa-fw"></i> '.$rows_reportedlinks['name'].'
<span class="pull-right text-muted small"><em>'.$rows_reportedlinks['time'].'</em>
</span>
</a>';
}?>
</div>
<!-- /.list-group -->
<a href="reportedLinks.php" class="btn btn-default btn-block">View All Reports</a>
</div>
<!-- /.panel-body -->
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
1 answers
solution1
0 ACCPTED 2016-06-25 18:13:52
I found the solution myself: Just remove these couple of code that created troubles in the page
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
AND
<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
sb admin 2 menu doesn't collapse when i edit some content
My Side navbar doesn't collapse after page reload
expanded mobile navbar doesn't collapse after clicking link
Bootstrap 4 navbar doesn't collapse
Bootstrap 3 navbar doesn't work anymore
Bootstrap 5 navbar button collapse doesn't work
Navbar toggle collapse doesn't appear
Bootstrap 3.3.7 navbar collapse doesn't work
Navbar doesn't collapse properly in bootstrap 3
Bootstrap navbar collapse doesn't work
Related Tags