I'm really confuzed about this problem i have the same code on all files and is working fine but just it does problem on home.php. The problem is that the dropdown menu doesn't showing here is the code please take a look and tell me what wrong am doing ?
navigation.php
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="sidebar.css">
<script type="text/javascript">
function htmlbodyHeightUpdate() {
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
function myFunction() {
document.getElementById("matcheslist").innerHTML = "<input class='form-control' id='m1' type='text' placeholder='MATCH'>".length + 1;
}
</script>
</head>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse sidebar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<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="#" style="font-size: 20px;">Upstrey</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="home.php">HOME<span style="font-size:18px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li ><a href="news.php">NEWS (coming soon)<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-list-alt"></span></a></li>
<li ><a href="#">TENNIS<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li><a href="#">BASKETBALL<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li ><a href="#">HOCKEY<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>
<li ><a href="#">BASEBALL<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li ><a href="#">AM. FOOTBALL<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li ><a href="#">HANDBALL<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li ><a href="#">VOLLEYBALL<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li ><a href="#">RUGBY UNION<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li ><a href="#">CRICKET<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MORE <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="shared.php">Shared Tickets</a></li>
<li><a href="history.php">History</a></li>
<li><a href="messages.php">Messages <span class="badge"><?php check_messages(); ?></span></a></li>
<li class="divider"></li>
<li><a href="#" data-toggle="modal" data-target="#addTicket">Add Ticket</a></li>
<li><a href="#" data-toggle="modal" data-target="#changePassword">Change Password</a></li>
<li class="divider"></li>
<li><a href="logout.php">Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
sidebar.php
body,html{
height: 100%;
}
/* remove outer padding */
.main .row{
padding: 0px;
margin: 0px;
}
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
@media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:target + .main{
margin-left: 220px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*gives sidebar width/height*/
nav.sidebar {
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
@media (min-width: 1400px) {
/*Allow main to be next to Nav*/
.main{
width: calc(100% - 200px); /*keeps 100% minus nav size*/
margin-left: 200px;
}
/*Show all nav*/
nav.sidebar{
margin-left: 0px;
float: left;
}
/*Show hidden items on nav*/
nav.sidebar .forAnimate{
opacity: 1;
}
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
section{
padding-left: 15px;
}
.navbar-header{
width: 200px !important;
}
#bs-sidebar-navbar-collapse-1{
width: 200px;
}
BTW im using this example:
http://bootsnipp.com/snippets/featured/responsive-sidebar-menu