Bootstrap dropdown in collapse not showing on first attempt - javascript

I have a dropdown menu inside a nav-collapse.
When I reduce the window's width (eg: 700px), the navbar correctly collapses, then I click on btn-navbar to un-collapse it, then I click on the dropdown, but it does not drop down, the menu does not show. If then I collapse and un-collapse again, the dropdown starts working.
The same happens when the window's width is small from the beginning.
It's like the height of the collapsed part was fixed at the beginning, and it doesn't let the dropdown do its thing.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-responsive.css" />
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Anonymous <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href=''><i class='icon-chevron-right'></i> Login</a>
</li>
<li>
<a href=''><i class='icon-plus'></i> Register</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap v2.2.0
Firefox 16.0.2


A lot of people were reporting this as a bug on the repo (eg. Issue #5671, Issue #5890, Issue #6019).
In response to #5671, someone points out that as per the docs on responsive Navbar, when using the class navbar-collapse you must also include collapse. Seems that your example suffers from this same (albeit easily overlooked) flaw.
Here's a working example of your code, the only difference being adding the collapse class:
Plunker

Related

Bootstrap Navbar Collapse Not Showing List

I am using bootstrap navbar and I have a collapsible navbar. But I am facing a strange problem, whenever I open my site i.e mobile phone or tablet (actually for which devices I need the collapsible navbar), the button appears but I'm not able to open the navbar. This should not happen. If I click on the navbar button (three line button) nothing happens.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span>
<br class="hidden-xs">Menu
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span>
<br class="hidden-xs">About
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span>
<br class="hidden-xs">Awards
</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span>
</a>
<div>* We Deliver</div>
</li>
</ul>
</div>

Please check your jQuery version. I hope this will fix your problem. Here is demo link: https://codepen.io/shamimipt/pen/abLKRrx
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>```

Bootstrap navbar-collapse button not working

I know this has been asked thousands of time and I've been looking at some of the similar questions for about and an hour now.
I can't figure out whats the problem in my code and no matter what solution I try it doesn't works.
Here is the navbar snippet in my project (derived from the bootstrap docs):
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" 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"#rtNavbar" 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>
<a class="navbar-brand" href="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm using bootstrap 3 for a express node.js app. And I'm using hogan templating if that matters.

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" 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=".navbar-collapse" 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>
<a class="navbar-brand" href="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
Just Make This Change In The data-target.
https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a

Its because Bootstrap is not compatible with jQuery 3. Use jQuery 2, or embed jQuery Migrate after jQuery.

change your data target its wrong try like this
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">
If doesn't thats because of Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment. So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.

Part of the problem might be the way (and where) the JS and jQuery is embedded in your code. I noticed - at least for the JS - that there isn't a closing </script> tag. I think your problem may be as simple as not having these tags in the right place and not being closed properly.
I've used the following <script> additions in the <head> and had the collapse button work, so you may want to try these within the <head>. It may even be as simple as not including these two scripts right below the Bootstrap CSS link. It should look something like this (for Bootstrap 3):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You've also got a problem with the data-target in your <button> tag. Try using something like data-target""#myNavbar" instead.
The other thing is that you have a redundant navbar-collapse for the second <div> pertaining to the right-aligned elements in your bar. This could muddy the waters and cause problems. Otherwise, the rest of the code materials look good. Just try declaring the above code in the <head>. Good luck!

Bootstrap navbar collapse button not working

I'm currently making a website that utilizes the Bootstrap Navbar. Everything seems to be working fine when making the window smaller, the triple bars show. When I try to click on it though, it seems it doesn't want to drop down like it should.
I've included this in my code:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Here's what I used for the Navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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="#">Zachary Vincze</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Me</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
</div>
</div>
</nav>
If anyone could help, that'd be awesome. Thanks in advanced!

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
JQuery must be included first, if this doesn't fix you issue let me know and I will adjust my answer :)

If you open your console/debugger window in your browser you'll see the following error:
Uncaught Error: Bootstrap's JavaScript requires jQuery
You need to include jQuery before bootstrap for this functionality to work.

Bootstrap collapse component not closing menu on clicking away

When I click away the menu doesn't hide, I found this code at:
http://getbootstrap.com/components/#navbar
but doesn't work as it should.
<nav class="navbar navbar-default navbar-fixed-top" 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-example-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="index.php">
<img class="desktop-logo" src="img/logo.png" alt="Company title">
<img class="mobile-logo" src="img/logo-white.png" width="169" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">List</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Yes, I got: proper libraries installed: Bootstrap v3.0.3.
There are no javascript errors, and the HTML code is valid.
Steps to reproduce:
Download the bootstrap 3.0.3 zip package, make an index.html file, insert the css and js stuff for bootstrap.
Enter the above code, and it's not closing when click or touched away.
So is the code meant to hide the menu or not ?

I had the same problem and the solution was to make sure that bootstrap.js is not referenced more than once. I had it loaded two times in my page and this rendered described problem.
<script src="/js/bootstrap.min.js"></script>
Do not load it more than once!

This should do
<script>
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
</script>
This is the reference gist
https://gist.github.com/winnyboy5/8750551

In addition, I would like to point out; this problem may be caused by reference to both bootstrap.js and bootstrap.bundle.js in the HTML file. If you are referencing both bootstrap.js and bootstrap.bundle.js, removing either one will solve this problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapse Test Application</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container mt-3">
<h2>Simple Collapsible</h2>
Collapse
<div id="demo" class="collapse">Simple Collapsible</div>
</div>
<!-- Collapse will open but not close if you use both of the references below. -->
<!-- Adding one of the following references to the project solves this problem. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>

The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.
$(document).on('click',function(e){
if($('#bs-example-navbar-collapse-1').hasClass('in')){
$('.collapse').collapse('hide');
}
})

There is another solution here, which also works when having sub-menus.
<script>
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
</script>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
^ I had the .js file too far down. Change your lines to look like the above and the responsive button should also close the menu.

I had my Bootstrap.min.js file after jquery and css files. i moved it above and it worked for me.

I had the same problem. Don't using script "hack". Just try to use jquery 2.1.4 or older.

Trouble with bootstrap responsive nav collapse

I've been pulling my hair out over this. The doc makes it seem so simple but I cannot for the life of me get the collapsed navigation bar to expand properly/consistently. I have to click 2-3 times for it to expand, and it only does so after playing the "collapse" animation.
In an attempt to isolate the issue, I created this page that has the stock bootstrap nav HTML and the bare minimum .js I think it required to get it to work.
http://stats.thephish.fm/test.html
(same nav is on the root index for that site).
Help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
<link href="css/my.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Overview
</li>
<li class="">
Scaffolding
</li>
<li class="">
Base CSS
</li>
<li class="active">
Components
</li>
<li class="">
Javascript plugins
</li>
<li class="">
Using LESS
</li>
<li class="divider-vertical"></li>
<li class="">
Customize
</li>
<li class="">
Examples
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have also tried adding this script in the head tag:
<script type="text/javascript">
$(document).ready(function() {
$('.collapse').collapse();
});
</script>
but the collapse does not work at all when I do this.

Was including both bootstrap.js and bootstrap-collapse.js. oops. I have to say this is kind of confusing, because every plugin says "Download file" next to it, which seems to indicate it's an add-on that enhances the default javascript library.

Categories