I'm developing my own website using bootstrap and I added a collapse navbar fixed at the top but it does not unfold when I click the hamburger button.
I've read some blogs and do not seem to have the two main problems which are:
- not putting a good data-target
- not putting the jquery call before the bootstrap javascript
I've literary spent the whole day today trying to figure this out. Here is my html, if you find something I would be so relieved.
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" media="screen" type="text/css" href="cvop1.css" />
<link rel="stylesheet" media="screen and (max-width: 767px)" type="text/css" href="petite_version1.css" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<title> Oncle Joe </title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Joseph Durand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Formations <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-header">Cours proposés</li>
<li>Macroéconomie</li>
<li>Histoire de la philosophie politique</li>
<li>Mécanique quantique</li>
<li role="separator" class="divider"></li>
<li>Suggestions et avis</li>
</ul>
</li>
<li class="dropdown">
Orientation<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-header">Guide des études</li>
<li>Études à l'étranger</li>
<li>Autres témoignages</li>
<li role="separator" class="divider"></li>
<li>Ajoutez vos parcours</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li class="dropdown-header">Découvrez et commmentez !</li>
<li>Musique</li>
<li>Artistes famille</li>
<li role="separator" class="divider"></li>
<li>Partagez-moi vos créations</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li class="dropdown-header">Un accès public et privé</li>
<li>Ma mif</li>
<li>Ma meuf</li>
<li>Mes gars sûrs</li>
</ul>
</li>
<li> Mini-jeux </li>
<li> <img src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-1/p320x320/15871974_1190156091033303_4585352380125885170_n.jpg?_nc_cat=103&_nc_sid=dbb9e7&_nc_ohc=qn93db1mdrMAX_7cN9y&_nc_ht=scontent-cdt1-1.xx&_nc_tp=6&oh=495fb008b60203147ed553338147388b&oe=5EC9B841" alt="C'est moi!" width="22" height="22"/> </li>
</ul>
</div>
</nav>
```
I've read through others posts the whole evening and just found one that answers mine. I had downloaded a too recent jQuery version (3. something) whereas it only works with jQuery 1 or 2
I got the idea from the first comment to this question:
Navbar collapse is not working in Bootstrap
I'm sorry if I bothered any of you too long with this and hope this will help others:
Check the data-target
Check that jquery is called before the bootstrap javascript
Check that your jquery and bootstrap versions correspond to the commands/functnionalities you want
Please look at my HTML structure.The problem is that when ever I am trying to open it in the mobile responsive view the design is getting scattered.But in the desktop view this is working fine.The first dropdown under the "Dropdown" tab is working fine but from the third dropdown this getting messy in the mobile responsive view.
I have used "animate.min.css" and "bootstrap-dropdownhover.min.css" for the css part and for the js part I have used bootstrap-dropdownhover.js for the js part.
and my html code is here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 101 Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Dropdown Hover CSS -->
<link href="css/animate.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.js"></script>
<style>
.my_caret {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
Project name </div>
<div class="navbar-collapse collapse" id="navbar" data-toggle="dropdown" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown"> <a class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="dropdown"> One more separated link<span class="caret my_caret"></span>
<ul class="dropdown-menu">
<li>Something else here</li>
<li class="dropdown">Separated link<span class="caret my_caret"></span>
<ul class="dropdown-menu">
<li>Something</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
Have taken reference from this site
http://kybarg.github.io/bootstrap-dropdown-hover/#dropdowns-installing
Thanks in advance for help
I am using bootstrap framwork and trying to change few properties with navbar, like background color,
When I uses css from a local copy like, ./bootstrap.css override works fine or when I pasting whole css or just navbar css to liveweave CSS column override working.
But
when I am using maxcdn server like
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
Override is failing whether its liveweave or my pc, even after using !important override fails.
I am using
navbar navbar-default navbar-fixed-top
classes
I am sure about what I said above, even before posting this question I visited at least 10 pages or similar question to find solution but none them used CSS from maxcdn server.
Working Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="./google.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">Brand</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="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <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>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <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>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
main.css
.navbar-default{
background-color:red;
}
If you use a local css file for override. you must be sure this file is read after the maxcdn...... file. the last one is the css element used
Having the same issue... I noticed that, when viewing the maxcdn bootstrap.min.css in my text editor, the code stops running at ".glyphicon-phone:before{content:"\e145"}.glyphicon..." so I wonder if that is relating to the issue. Hoping that it gets sorted out soon!
I am using bootstrap framework and tried to replicate http://twitter.github.com/bootstrap/examples/hero.html
can any one please tell me why the dropdown-menu is not working.
the drop down menu which works in the example is not working with my code and i have included proper styles and js ! and one other styles are working so thinking its not a prob with the style any help ll be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="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>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
#bana close the footer close tag
Edit your Script Reference like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I have used the below online utility before and it has worked for me. It is free and quick. I created a sample dropdown menu and then examined the code to apply to my website. Good luck.
CSS Menu Maker
Use the css and js file the following way: Check Jsfiddle Example with cloud hosted bootstrap css and js
Also you are using wrong version of Jquery in your page it has to be
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The html should like below :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
</head>
And in footer :
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
My dropdown menu in Bootstrap doesnt appear to be working - can anyone alert me to the problem? Right now it displays the dropdown, but clicking it does nothing. Thanks!
JS:
$(document).ready( function() {
$('.dropdown-toggle').dropdown();
});
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Title
</a>
<ul class="nav">
<li>Profile</li>
<li class="active">Statistics</li>
<li>Reader</li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Options
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Check if you're referencing jquery.js BEFORE bootstrap.js and bootstrap.js is loaded only once. That fixed the same error for me:
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
This is a Rails specific answer, but I had this same problem with Bootstrap dropdown menus in my Rails app. What fixed it was adding this to app/assets/javascripts/application.js:
//= require bootstrap
Hope that helps someone.
putting
<script src="js/bootstrap.min.js"></script>
file at the last after the
<script src="jq/jquery-2.1.1.min.js"></script> solved this problem for me .
this is how i use write it now and no problem
<script src="jq/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Double importing jquery can cause Error
<script src="static/public/js/jquery/jquery.min.js"></script>
OR
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>
I had to download the source files instead of just the compressed files that it says to use for quick start on the bootstrap website
I had a similar problem. The version of bootstrap.js that visual studio seems to be hosed. I just pointed to this URL instead:
<link id="active_style" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css">
For completeness, here's the HTML and javascript
<ul class="nav navbar-nav navbar-right">
<li id="theme_selector" class="dropdown">
Theme <b class="caret"></b>
<ul id="theme" class="dropdown-menu" role="menu">
<li>Amelia</li>
<li>Cerulean</li>
<li>Cyborg</li>
<li>Cosmo</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Lumen</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
</ul>
Javascript
$('#theme li').click(function () {
//alert('item: ' + $(this).text());
switch_style($(this).text());
});
Hope it helps someone
I've scratched my head for the last few hours and only figured it is due to difference between bs4 and bs5, namely you should replace data-toggle="dropdown" in bs4 with data-bs-toggle="dropdown" in bs5 and vice versa, hope that helps
If I am getting you correctly, when you say that clicking does nothing, do you mean that it does not point to your URL?
In the anchor tag <a href>it looks like you did not pass your file path to the href attribute. So, replace the # with your actual path for the file that you want to link.
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
I hope this helps with your issue.
you are missing the "btn btn-navbar" section. For example:
<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>
Take a look to navbar documentation in:
Twitter Bootstrap
If you are using electron or other chromium frame, you have to include jquery within window explicitly by:
<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>
When i checked i saw display: none; value is in the .dropdown-menu bootstrap css class. Hence i removed it.
put following code in your page
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
function EndRequest(sender, args) {
if (args.get_error() == undefined) {
$('.dropdown-toggle').dropdown();
}
}