Bootstrap dropdown in navbar not working - javascript

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/

Related

How to make some links in nav to not hide on mobile? bootstrap 3

I have a 2 li dropdowns in the nav menu on bootstrap. I want the first to hide, and the second not to. But by default bootstrap hides all lists under the burger icon on small screens.
I am using pure bootstrap 3 code from there site:
<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">
NOT HIDE ON MOBILE <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>
<!-- HOW TO MAKE THIS PART NOT HIDE ON MOBILE? -->
<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>
In this case you'd have to add some custom CSS media queries to position the navbar components accordingly.
Demo: http://www.codeply.com/go/5E3YxlDKYy
/* float the left and right collapsible navs only on desktop */
#media (min-width: 768px) {
.pull-sm-left {
float:left;
}
.pull-sm-right {
float:right;
}
}
/* absolute position the single item next to the brand on mobile */
#media (max-width: 767px) {
.navbar-text.list-inline {
position: absolute;
z-index: 1;
top: 0;
left: 100px;
}
}
Well you can put it after navbar-brand inside navbar-header div as:
<a class="navbar-brand" href="#">Brand</a>
<a class="btn btn-default pull-right" href="#">Menu</a>
You can use button or drop downs there
Hope this helps..

Why isn't my Bootstrap JS working? [duplicate]

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">

Apply header height to body as padding top on window resize

I'm able to fetch and applying the height of the header as padding top to bodyon window.resize. the issue is when i tried to resize the window to full width the resize function is not working i think.
var headerHeight = $('header').innerHeight();
console.log(headerHeight);
function carouselHeight(){
$('body').removeAttr('style');
$('body').css("padding-top", headerHeight);
};
$(document).ready(function(e) {
carouselHeight();
});
$(window).resize(function(){
carouselHeight();
});
body {
min-height: 2000px;
padding-top: 70px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fixed 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">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>Why Bootstrap</li>
<li>Another action</li>
<li>Something else here</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Why Bootstrap</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>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs ยป</a>
</p>
</div>
</div> <!-- /container -->
Sorry I found the mistake in my script. Header height is not mentioned in the function. so it is not getting the correct height in on resize
function carouselHeight(){
var headerHeight = $('header').innerHeight();
$('body').removeAttr('style');
$('body').css("padding-top", headerHeight);
console.log(headerHeight);
console.log('hi');
};
$(document).ready(carouselHeight);
$(window).resize(carouselHeight);
You have to execute them like this:
var headerHeight = $('header').innerHeight();
console.log(headerHeight);
function carouselHeight(){
$('body').removeAttr('style');
$('body').css("padding-top", headerHeight);
};
$(document).ready(carouselHeight);
$(window).resize(carouselHeight);

Bootstrap Navigation with more links.. Trying to find a solution with jquery

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.

Bootstrap 3 menu - two collapse buttons - only one open at a time

I am trying to make a menu in bootstrap 3. When it gets down to mobile size, I have two collapse nav-toggle buttons. As default, when one is open, it just gets stacked on top of each other. What I would like is one drop down open at a time.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-search">
<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</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 class="divider"></li>
<li>Separated link</li>
<li 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 <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>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div id="test2" class="nav-search collapse">
<div class="search_box">
<ul class="nav navbar-nav">
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
</ul>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div><!-- /.container-fluid -->
</nav>
I searched and found this, but that is for bootstrap 2:
Bootstrap Menu - Two Collapse buttons which toggle each other? Meaning, only 1 open at a time
I feel like I am missing something easy. Below is a jsfiddle link:
http://jsfiddle.net/Bootstrap714/RfsS9/4/
You have got the name of the event wrong. You need to call it on on('show.bs.collapse'... instead of just on on('show'....
Here is a fixed fiddle
Found a kind of "hackish" solution
if, the sibilings button, doesn't have a collapsed class, click on it.
$('.navbar-toggle').on('click', function () {
if(!$(this).siblings('.navbar-toggle').hasClass('collapsed')) {
$(this).siblings('.navbar-toggle').click();
}
});
http://jsfiddle.net/t96Ry/

Categories