I can't find the reason why, when trying to use the navbar button from Bootstrap, it doesn't work.
I think it has something to do with my page loading the jQuery library or something, though I don't understand.
Here is my code. I'll show just the head and navbar parts since I believe there's where the problem lives. Everything else is simple HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjsmfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!--Boostrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!--Favicon-->
<link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
<!--Mi CSS-->
<link rel="stylesheet" type="text/css" href="index.css">
<!-- p5.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
<script src="js/sketch.js" type="text/javascript"></script>
<title>Festival Sonorum</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Festival Sonorum</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Programa</li>
<li>Acerca</li>
<li>Contacto</li>
<li>Galería</li>
<li class="dropdown">
Artistas <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!--fin del navbar-->
Am I missing something? Like loading a library?
Bootstrap does not include jQuery, so you need to add it yourself to make it work. Add it just before your bootstrap.js script.
As per Bootstrap's docs:
jQuery required
Please note that all JavaScript plugins require jQuery
to be included, as shown in the starter template. Consult our
bower.json to see which versions of jQuery are supported.
On top of that, the integrity check fails on your bootstrap.min.js script. To make it work you need to fix that and add at least version 1.9.0 of jQuery:
...
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
...
You should check your bootstrap.css files in the head section, jquery.js before body closing tags, and you should give id to toggled nav same as button data-target.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
Related
bootstrap3 navbar collapse worked on jsfiddle as following.
https://jsfiddle.net/wa3he6bn/1/
<html>
<header>
<title>title</title>
....
</header>
<body>
<div class="wrap">
<nav id="w1" class="navbar-default navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-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">Logo</a></div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul id="w2" class="navbar-nav navbar-right nav">
<li>主页</li>
<li>文档</li>
<li>卷库</li>
<li class="help-link"><a href="javascript:void(0);"><span
class="glyphicon glyphicon-question-sign"></span></a></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
but when save same html and run locally, it does not collaspe.
First of all use <head> instead of <header> then Try to use this meta tag in your <head> section
<meta name="viewport" content="width=device-width, initial-scale=1">
then the navbar will collapse for all screen sizes smaller then 768px as bootstrap's default behaviour.
So to expand it on certain screen break point you can add this class combination
navbar-expand-* to the main nav element.
Hope it works for you.
There are multiple things you should consider in your code.
You should put your resources in <head> not <header>. There is a major difference between these two, one contains machine-readable information while the other represents introductory content.
You need to load jquery.min.js before bootstrap.min.js, because the bootstrap will need to use jQuery.
You also need to add <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> to be able to control viewport in all screen sizes.
By honoring these two notes your code should work as expected.
<html>
<head>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<!-- 以下为页眉内容 -->
<nav id="w1" class="navbar-default navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-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">Logo</a></div>
<div id="w1-collapse" class="collapse navbar-collapse">
<ul id="w2" class="navbar-nav navbar-right nav">
<li>主页</li>
<li>文档</li>
<li>卷库</li>
<li class="help-link"><span class="glyphicon glyphicon-question-sign"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span>
</li>
</ul>
</div>
</div>
</nav>
<!-- 结束 -->
</div>
</body>
</html>
Use <head> tag. and include js files near the end of your page, right before the closing of </body> tag.
To save time in the future, please visit bootstrap official docs.
https://getbootstrap.com/docs/4.5/getting-started/introduction/
it's one of the best and well-written documentation.
I have been trying to use bootstrap(4) to creat a website. I got stuck at creating menu with dropdown lists. I cannot make it work, I even tried copying exact code of the docs for bootstrap and it still doesnt work. I have checked and rechecked paths for bootstrap css and js and I really dont know how to make it work.
While at it, can I use bootstrap to create dropdown lists inside dropside lists? It is for Menu purposes.
bootstrap docs, w3schools and other websites. even copying exact code makes no difference, the button doesnt work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-grid.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-reboot.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="bootstrap/css/bootstrap-reboot.min.css">
<title>Animal World</title>
<style>
</style>
<img src="animalworld.jpg" class="img-fluid w-100" alt="Animal">
<div class="dropdown fixed-top bg-faded ">
<button class="btn dropdown-toggle" type="button" id="DropDownAnimals" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Animals
</button>
<div class="dropdown-menu" aria-labelledby="DropDownAnimals">
<button class="dropdown-item" >Dogs</button>
<button class="dropdown-item" type="button">Horses</button>
<button class="dropdown-item" type="button">Birds</button>
</div>
</div>
<!--<nav id="navbar" class="navbar fixed-top navbar-collapse-md navbar-light bg-faded">
<a class="navbar-brand" href="#">Animal World</a>
<button class="navbar-toggler-right" type="button" data-toggle="collapse" data-target="#MainMenu" aria-controls="MainMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="MainMenu" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Animals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Stuff</a>
</li>
</ul>
</div>-->
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
</script>
In the above code there are two different parts of code both for similar button. First doesnt work at all. second does, but in a way that just makes button move to right and the 3 other buttons appear on left. unable to change it at all. I would expect the dropdown come directly underneath the button as per docs.
I think you're importing your scripts in the wrong order.
Try putting the jquery script tag first, then the popper script, then you Bootstrap scripts.
And to answer your subsidiary question, it is absolutely possible to put a dropdown into a dropdown.
I have the following code.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
</body>
</html>
Now, when the navbar collapses, it simply will not open when I press the hamburger icon. It just stays stuck and I cannot open the navbar when the window gets smaller.
I have tried adding different css and js links, but it doesn't help.
Please do help!
Thanks,
David.
(Please do run the snippet - the problem simply is that the hamburger icon stays stuck - as you may see!)
You have to load Jquery before Bootstrap in your head section.
If you check you console you will see an error message:
Uncaught Error: Bootstrap's JavaScript requires jQuery
This is because you load first the bootstrap.min.js and then jquery.min.js.
Bootstrap's JavaScript requires jQuery...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I followed all the instructions from a tutorial that I watched but the responsive menu is not expanding? Even the dropdown is not working. When I click the button nothing's happening, it's only changing its color. What could I be doing wrong?
HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<!-- Bootstrap -->
<link href="view/css/bootstrap.min.css" rel="stylesheet">
<link href="view/css/styles.css" rel="stylesheet">
<script src="js/respond.js"></script>
<script src="view/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<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="#"><img src="view/images/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
The Institution <b class="caret"></b>
<ul class="dropdown-menu">
<li>About the Institute</li>
<li>Research & Programs</li>
<li>Board of Advisers</li>
<li>Educational Quality Team</li>
</ul>
</li>
<li>The Center</li>
<li>Opportunity</li>
<li>Get In Touch</li>
</ul>
</div>
</div></div>
JS
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
It's working now I just edited this part
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and also deleted everything except for this
<script src="js/respond.js"></script>
thanks to everyone who answered! :)
You have bootstrap.js included twice, once before jQuery is loaded. Remove
<script src="view/js/bootstrap.min.js"></script>
in your head section
So this is the 3rd time I've wiped everything clean from my repo and started from scratch because of this issue.. I am not familiar with js or jquery so a lot of this is over my head, just hoping to make it functional. I copied the theme from bootstrap and it was working fine at first.. I added the "reportcard.js" feature and the nav-collapse menu stopped working.
Here is my github addy - https://github.com/twotimes22/twotimes22.github.io
Site is live at www.thomasweld.com
Here is my code up through the Nav
<!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="">
<link rel="icon" href="../../favicon.ico">
<title>Thomas Weld | Developer + Marketer</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Report Card CSS-->
<link rel="stylesheet" href="/js/reportcard/css/badges.css">
</head>
<body role="document">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
You haven't included the bootstrap.js in your document. It has the code to make it work.