Question posted in 
I know that the collapsed toggle navigation button has a large issue on Stackoverflow. I am experiencing the same problem with three websites im building and im using the same html order and especially for the navigation bar…and the toggle button doesnt want to respond to the clicks i give it. I am using jQuery v1.11.2, Compiled and minified CSS, JavaScript, and fonts bootstrap from http://getbootstrap.com/getting-started/. what i would lie to know is does the JQuery version matter with regard to code compatibity between bootstrap and JQuery? My code for the “UN-WORKING” navbar-toggle button is as follows:
<!DOCKTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="en">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="Bootstrap-three/CSS/bootstrap-theme.min.css" rel="stylesheet">
<link href="Bootstrap-three/CSS/bootstrap.min.css" rel="stylesheet">
<link href="Bootstrap-three/CSS/bootstrap.icon-large.min.css" rel="stylesheet">
<script src="Assets/modernizr-custom.js" rel="stylesheet"></script>
<link href="Assets/normalize.css" rel="stylesheet">
<link href="Assets/Animate.css" rel="stylesheet">
<link href="CSS/Styles.css" rel="stylesheet">
</head>
<body>
<div class="background">
<!-- <img src="images/img/abstract-artistic-HD-wallpapers.jpg" class="" alt=""> -->
</div>
<div class="Container">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="Container">
<!--type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="collapse" data-target="#navigate" type="button" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand flip">
<a href="#" class="front"><img src="images/dsg/logo-n.png" height="60px" width="inherit" alt="logo"></a>
<a href="#" class="back" style="margin: 0px 15px;"><img src="images/dsg/logo-b.png" height="60px" width="inherit" alt="logo"></a>
</div> <!---->
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse pull-right" id="my-nav-items">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Contact us</a></li>
<!-- <button class="btn btn-default" type="button"> <strong class="glyphicon glyphicon-search"></strong></button> -->
</ul>
</div>
</div>
<div class="misc-links">
<div class="container">
<div class="pull-right" style="padding: 5px;">
<img src="images/ico/facebook.png" class="hover-img" alt="Like us on Facebook"><img src="images/ico/instagram.png" class="hover-img" alt="Follow us on Instagram"><img src="images/ico/twitter.png" class="hover-img" alt="Follow us on Twitter">
</div>
</div>
</div>
</nav>
</div>
<!-- faster load tie -->
<script src="jQuery/jquery.min.js" type="text/javascript"></script>
<script src="jQuery/jquery.jcarousel.min.js" type="text/javascript"> </script>
<script src="Bootstrap-three/JS/bootstrap.min.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/bootstrap.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/npm.js" type="text/javascript"></script>
<script src="Javascript/Script.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/bootstrap-modal.js" type="text/javascript"></script>
<script src="smooth-scroll/SmoothScroll.js" type="text/javascript"></script>
</body>
</html>
and the custom embedded CSS styles are as follows:
<style>
body a {
color: #2b2b2b;
}
body a:hover {
color: #fff;
text-decoration: none;
}
nav {
min-height: 100px;
background: #fff;
color: #000;
padding: 0;
margin: 0;
}
nav a:hover {
color: orange;
text-decoration: none;
}
.navbar-toggle {
background: cadetblue;
color: #fff;
}
footer {
background: #fff;
color: #000;
vertical-align: middle;
}
.container {
background: transparent;
}
body a: hover {
color: white;
background: black;
}
.social-login-strip {
width: 100%;
height: inherit;
background: #222;
color: white;
border-bottom: #000 thick solid;
}
.social-login-strip a {
color: white;
text-decoration: none;
}
.social-login-strip a:hover {
color: white;
text-decoration: none;
}
.white {
padding: 20px 0px;
color: #000;
background: #fff;
min-height: 100px;
}
.icon-bar {
background: white;
}
.cari {
min-height: 500px;
height: inherit;
top: 80px;
background: transparent;
color: white;
}
.cari a {
color: white;
}
.cari a:hover {
color: azure;
}
.sector {
min-height: 600px;
background: #222;
color: white;
}
.background {
max-width: 100%;
max-height: 100%;
position: fixed;
z-index: -9999;
background-size: contain;
}
#d-strip {
min-height: 60px;
background: url("images/img/6933687-abstract-artistic-art.jpg");
background-size: cover;
}
.misc-links {
height: 30px;
background-color: orange;
}
.space {
top: 0;
left: 0;
max-height: 100%;
min-width: 100%;
background: white;
}
.banner-prop {
max-height: auto;
max-width:100% ;
}
.centering {
padding: 5% 0;
}
.child-centering {
padding: 10% 0;
}
.strip {
min-height: 30px;
background: url("images/img/HD-Painting-Wallpaper-Desktop-Background-1.jpg");
}
.constrain {
max-height: 500px;
max-width: inherit;
}
.caption-blok {
min-height: 30px;
background: #2b2b2b;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #fff;
padding: 2px 5px;
}
.divide {
background: transparent;
min-height: 200px;
}
#linker {
background-color: cadetblue;
min-height: 300px;
width: 100%;
color: white;
opacity: 0.9;
-webkit-opacity: 0.9;
}
.bgbgor {
background: orange;
}
#sign-up {
border: #2b2b2b medium solid ;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.marg-min {
margin: 20px;
}
</style>
Please help out because many of the solution posted are not applying to my code. Thank you.
3
Answers
just change id in following line
to
your navigation target is wrong
you target
data-target="#navigate"but target
data-target="#my-nav-items"Please check the following code. I made some minor modifications,
1. Fixed data-target attribute value.
2. Added CDN for bootstrap. ( if you have the bootstrap files in local delete it).
3. Some minor fix in bootstrap nav classes.