This question already has an answer here:
bootsrap nav-bar collapsable cannot make it work
(1 answer)
Closed 6 years ago.
I'm trying to create a website using Bootstrap, but the default navbar (Which I'm using just to test if Bootstrap is loaded) isn't working. It's saying I didn't install jQuery, but I tested it twice and it jQuery was installed. Please help.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</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">
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</body>
</html>
Note:
It also didn't work offline (As in using script src="bootstrap.min.js" in the same folder as the html file). I'm using WebStorm 2016.3.2, if that helps.
It is probably because of jQuery is linking after Bootstrap.
Put jQuery in the header before Bootstrap.
My script part of header looks like this:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="stylesheets/styles.css">
Related
i have setup a bootstrap navbar with javascript program that works on hover on Desktop screen and works on click on mobile and tablet screen. but i have an issue that whenever on desktop screen i click on any navbar any button it start toggling. so i have to refresh the page again to make it work normally.
$(document).ready(function(){
if($(window).width() < 768) {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
} else {
$(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
}
});
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 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>
<div class="row">
<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>
<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>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Try mynavbar framework _nel, they make hover on the desktop and click on mobile
http://getnel.github.io
I am messing around trying to make a custom bootstrap 3 website however I'm currently stuck up on this dropdown menu. I have tried everything from using the web CDN instead of my local files, copying other peoples dropdown code and nothing seems to want to work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- MDP top banner image -->
<div class="top-banner">
<img class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>
<!-- top bar nav -->
<nav class="navbar navbar-inverse navbar-maintop">
<div class="container-fluid align-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-tab">HOME</li>
<li class="nav-tab">ABOUT US</li>
<li class="dropdown nav-tab">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!--<li class="nav-tab">SUSPENSION & LIFT COMPONENTS
</li> -->
<li class="nav-tab">PAGE 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
</body>
</html>
I'm trying to find a solution for my site navigation that consists with more links. After add more links it display in 2, 3 lines.please check the attached picture.This is after add more links
in above picture, i added blue colored link and rest of all are default bootstrap navigation. I want to keep navigation in one line. if need to see more links, need to click that blue colored link (for testing purpose i set it to display none). also when re sizing the browser it also should keep in one line.
i wrote a jquery code and it works when browser decreasing the size. but when increasing the size it doesn't work by adding one by one again. Is there anyway to do this? Anybody can please help me to solve the issue or by giving an idea.
Thanks
my codes,
$(document).ready(function(e) {
$(document).load($(window).bind("load", resThis));
$(document).load($(window).bind("resize", resThis));
var tot=$('.nav').find('.chld').length;
var pos_top=$('.btn').position().top;
var marg=$('.container').width();
function resThis(){
for(var i=tot; i>=0; i--){
if(pos_top>0){
$( ".nav .chld:nth-child("+i+")" ).addClass('a');
}
pos_top=$('.btn').position().top;
}
}
});
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
//ul{list-style:none;}
//ul li{float:left; padding:10px 30px; background-color:#C0B9B9; margin:10px; border-radius:10%;}
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
</style>
</head>
<body>
<div class="container">
<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 chld">Link <span class="sr-only">(current)</span></li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld 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>
<a href="#" class="btn btn-info btn-lg" style="float:right;">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
it works as intended for me even in full-screen and resizing it to all kinds of width... cant replicate the error you are describing and showing.
I am working on a website in HTML and CSS. I have installed bootstrap and added in a navbar. The problem is that the navbar has two dropdown menus, neither of which are working. They show up in the navbar, but clicking on them does nothing.
Here is the code header information:
<link type="text/css" rel="stylesheet" href="my_portfolio.css">
<link href='https://fonts.googleapis.com/css?family=Cabin:500' rel='stylesheet' type='text/css'>
Here is the code for the navbar:
<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">Skills<span class="sr-only">(current)</span></li>
<li class="dropdown">
Projects<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>
<li>Schools</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Contact Me<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>
And here is the Bootstrap JS info I added to the bottom of the body:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
For the Bootstrap Navbar element to work, you will also need the Bootstrap css file - get it here:
http://getbootstrap.com/getting-started/
or just insert this into your header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Make sure you have jQuery in your header too:
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
Working jsfiddle: https://jsfiddle.net/jsheridan390/3fuhLayt/
Be careful u are including bootstrap js below the jquery and also check console is there any error ?
Do you have include jquery into head ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
just change href="#" to href=""
Contact Me<span class="caret"></span>
<ul class="dropdown-menu">
Working fiddle https://jsfiddle.net/DTcHh/15547/
I am having trouble getting my dropdown's to work. I can get the navbar to show up perfectly, but when I click on "Dropdown" (either of them) it does not display the dropdown menu. I have tried looking on other posts about this, but nothing that fixed everyone's problems helped.
Here is the code
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
<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="">
<script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script type="javascript" src="dist/js/bootstrap.js"></script>
<script type="javascript">
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
</script>
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="navbar-wrapper"><!-- navbar start -->
<div class="container">
<nav class="navbar navbar-inverse navbar-static-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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</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">
<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>
</div>
</nav>
</div>
</div><!-- navbar end -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
In my case, I loaded bootstrap JS twice. Removed duplicate one and it worked.
The problem is in your stylesheet or bootstrap js Link (look at below). Check again!
<script type="javascript" src="dist/js/bootstrap.js"></script>
<link href="dist/css/bootstrap.css" rel="stylesheet">
I get this to work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
<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 href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
<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="#">Project name</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">Home </li>
<li>About </li>
<li>Contact </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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
I used the code from http://getbootstrap.com/components/#navbar.
And i get an Error with your jquery version so i used also the link from getbootstrap.com
http://getbootstrap.com/getting-started/#template
I tried openning you code with jsFiddle and it worked perfectly.
maybe there is a problem with one of your bootstrap files..?
Try downloading another bootstrap js file
Here is the working example - https://jsfiddle.net/ckcrogo6/ (The HTML code is exactly the same as the code you posted)
Used the bootstrap files found here - https://www.bootstrapcdn.com/
<body>
<div class="navbar-wrapper"><!-- navbar start -->
<div class="container">
<nav class="navbar navbar-inverse navbar-static-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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</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">
<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>
</div>
</nav>
</div>
Hope this will help