I'm using bootstrap to make a dropdown menu for login form, but when I click the image for login I cannot get the dropdown menu to display.
<ul class="nav navbar-right navbar-nav">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu" href="#">
<img src="~/Content/img/user-icon.png" />
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">enter code here
<input name="password" id="password" type="password" placeholder="Password">
<br>
<button type="button" id="btnLogin" class="btn">Login</button>
<br>
<br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a>
</p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about" class="cart">
<img src="~/Content/img/shopping-cart-icon.png" />
<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
I have added javascript and css from bootstrap, why doesn't my login form show?
EDIT
this is my code in fiddle here
You are missing the jQuery reference. Bootstrap requires jQuery to runt its plugins.
I have added the jQuery reference in your fiddle and the menu works ok. Try it.
Check out Bootstrap Documentation.
The parent element needs to be of class dropdown:
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<ul class="nav navbar-right navbar-nav dropdown">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Foobar
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<p>BAZ form</p>
</form>
</div>
</li>
</ul>
you should add jquery file also. bootstrap is build on jquery.add jquery to your file then it will work.
here is working fiddle for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav" style="margin-left: 5em;">
<li class="active">HOME</li>
<li>STORE</li>
<li>FAQ</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
<ul class="nav navbar-right navbar-nav dropdown" >
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Login</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">
<input name="password" id="password" type="password" placeholder="Password"><br>
<button type="button" id="btnLogin" class="btn">Login</button><br><br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a></p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li><a href="#about" class="cart">Cart<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
http://jsfiddle.net/yugi47/20jttkzh/3/
Related
Do someone see problem? I tried with replacing position of bootstrap
and jquery imports in this html. This work in online html renderer. Does this have some relation with angular?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<button class="navbar-toggle" data-target="#navbarToggler" data-toggle="collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="navbar-header">
<a class="navbar-brand">PROJECT</a>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href=""><span
class="glyphicon glyphicon-download-alt"></span>Download</a></li>
<li><a href=""><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
<li><a href="register"><span
class="glyphicon glyphicon-user"></span> Register</a></li>
<li> Logout</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'd like to create a site header like the one on stackoverflow..
I am using bootstrap but can't seem to get the header elements to appear on a single line.
Anyone have any ideas how I can achieve this?
Here is the jsfiddle - https://jsfiddle.net/31wxk9ak/2/ . depending on the size of your screen you may need to adjust the page split on this page in order to prevent you browser from stacking the elements.
Desired layout
Here is the code:
<html><head></head><body>
<div id="root">
<div data-reactroot="" class="container fill">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="/">Home</a></div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a title="About" href="/about">About</a></li>
<li><a title="Contact" href="/contact">Contact</a></li>
<li>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group"><input type="text" class="form-control"
placeholder="Search..."
value=""><span class="input-group-btn"><input
type="button" class="btn btn-default" value="Go!"></span></div>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">
https://oss.maxcdn.com/respond/1.4.2/respond.min.js'>
You are not implementing the navbar properly, use a form for the search box.
<ul class="nav navbar-nav navbar-right">
<li>
<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>
</li>
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
JSFiddle Demo
Reference:
Bootstrap Navbar
There's obviously many ways to do this, but I'll just show a couple. The first one uses floating, simply apply this to all navbar headers.
.navBarHeader {
float: left;
}
Alternately, you can use inline-block.
.navBarHeader {
display: inline-block;
}
I was just following the tutorial at linda.com and faced problem
I have index bootstrap.js and are being used in different folder
I think this is file location problem....or not.
I attached a photo of my project
structure
and my index code is like this
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
$(function(){
$('ul.nav il.dropdown').hover(function(){
$('.dropdown-menu',this).fadeIn();
}, function(){
$('.dropdown-menu',this).fadeout('fast');
});
});
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
<footer>
</footer>
</html>
And header is like this
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section><!---branding-->
<nav class="navbar navbar-inverse">
<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="#">Batam Tour &
Living Info</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><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Batam Tour <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Living Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<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">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!---header-->
</div><!---column-->
</div><!---content-->
You have two typos
il instead of li and fadeout instead of fadeOut and you unnecessary load myscript.js as a <link rel="stylesheet" - you can remove that line
If I add the JS and CSS and insert your header it works:
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="container">
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section>
<!---branding-->
<nav class="navbar navbar-inverse">
<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="#">Batam Tour &
Living Info</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><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
Batam Tour <span class="caret"></span>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
Living Info <span class="caret"></span>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<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">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!---header-->
</div>
<!---column-->
</div>
<!---content-->
<div class="content row">
<section class="main col col-lg-8">
</section>
<!---main--->
<section class="sidebar col col-lg-4">
</section>
<!---sidebar--->
</div>
<!---content--->
</section>
<!---container--->
It doesn't drop down when I click on it
why doesn't the drop down button work?
I used the bootstrap navbar found here :
Here is my code below:
Please ask if you need anything else from me
THanks in advance!!
DOCTYPE html>
<head>
<title>Unicity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link type="text/css" rel="stylesheet" href="style/style.css"/>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\bootstrap.min.js"></script>
<script src="U:\Desktop\jihad\unicityv1\js\npm.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#"><img src="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</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>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
</body>
</html>
I tried with your code there seem's no problem with code,it seems it not finding the correct CSS and Javascript. Try this and let me know.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#"><img src="U:\Desktop\jihad\unicityv1\images\logo1.png" width="110" class="logo"/>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Buy Gold</li>
<li class="dropdown">
Sell Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li>Runescape3</li>
<li>Oldschool Runecape</li>
<li>Darkscape</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>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Saving your money, we are cheap!</h3>
<p>At Unicity we save your money by...</p>
</div>
<div class="col-sm-4">
<h3>Saving your time, we are fast!</h3>
<p> At Unicity we save your time by...</p>
</div>
<div class="col-sm-4">
<h3>Protecting your information, we are secure!</h3>
<p> At Unicity we secure your information are make sure that...</p>
</div>
</div>
</div>
Demo:https://jsfiddle.net/1rwdc9os/
add Jquery library file.
Use either bootstrap.css or bootstrap.min.css and bootstrap.min.js or bootstrap.js
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Try in angular.... This is better than others...
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
I am using Bootstrap for the first time and my navbar is not collapsing. So in response to this question on SO, I checked the order of jquery and Bootstrap js files and its OK.
When I checked the Network tab to check if all resources are loading correctly, I am getting jquery.min.map error that it can't be loaded.
Is my problem related due to this missing file and why Bootstrap is asking for this file?
Here is the image :
And when I further decrease the screen width, the links and search disappear and the expand button also does not appear.
Here is my code for navbar for the reference
<div class="container" id="main">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
FAQ
</li>
<li class="dropdown">
Founders <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Naveen</li>
<li>Sumit</li>
<li>Sanjeev</li>
<li class="divider"></li>
<li>Naveen</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" role="search">
<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"></span></button>
</form>
<ul class="nav navar-nav pull-right">
<li>
<span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
</div>
You left out part of your nav html under navbar-header:
<button type="button" class="navbar-toggle collapsed" 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>
Here is a jsFiddle