I've new to bootstrap and tried to do some mock layout on my local server. Things were going well until I couldn't get the navbar to work on my mock page. I've checked on bothe safari and chrome and the results are still the same.
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class= "navbar navbar-inverse 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">
<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 Practice</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class= "active"> Home</li>
<li > About </li>
<li > Blog</li>
<li > Contact Us</li>
<li class= "dropdown">
Themes <b class="caret"></b>
<ul class="dropdown-menu">
<li class= "dropdown-header">Dashboard</li>
<li> Admin 1</li>
<li> Admin 2</li>
<li class="divider"></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- 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="js/bootstrap.min.js"></script>
Popped your code into Bootply and the only thing I could see that wasn't working was your dropdown wasn't dropping down when clicked.
Your problem is on this line:
Themes <b class="caret"></b>
See the extra space you have in the data-toggle attribute? Remove that, and your dropdown works just fine.
You also had an extra </li> tag in your dropdown. Doesn't break things, but it's not needed.
BOOTPLY
HTML:
<div class="navbar navbar-inverse 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">
<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 Practice</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Home</li>
<li> About </li>
<li> Blog</li>
<li> Contact Us</li>
<li class="dropdown">
Themes <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Dashboard</li>
<li> Admin 1</li>
<li> Admin 2</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
You have an error into the
Themes <b class="caret"></b>
the solution is:
Themes<span class="caret"></span>
Here the example:
Fixed example
<div class= "navbar navbar-inverse 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">
<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 Practice</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class= "active"> Home</li>
<li> About </li>
<li> Blog</li>
<li> Contact Us</li>
<li class= "dropdown">
Themes<span class="caret"></span>
<ul class="dropdown-menu">
<li class= "dropdown-header">Dashboard</li>
<li> Admin 1</li>
<li> Admin 2</li>
<li class="divider"></li>
<li> Admin 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- navbar -->
Related
I am new to using bootstrap,I am trying to add a user icon that should collapse when a user clicks on it. when i try to add navbar-toggle to a class the user icon item disappears.If i remove it the icon appears but when i click on the icon it doesn't collapse.
what am i doing wrong? how do i get the icon to "open/collapse"
<div class="navbar navbar-default navbar-inverse visible-sm" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand collapsed" data-toggle="collapse" data-target="#navbar-collapse-account" ><i class="fa fa-user" aria-hidden="true"></i></a> // i tried adding the class as "navbar-brand pull right navbar-toggle collapsed" but when i do this the user icon disappears
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-account" data-text="Login" data-class="login"> // this part doesn't open
</div>
</div>
</div>
</div>
Hope this helps...
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <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>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
source: w3schools.com
I'd like to make a header like this site or this site, I mean I want to put logo on left side and menu on right. But my header doesn't float well on here. I am confused now.
#header-right {
float: left;
}
#header-right {
float: right;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Header -->
<header id="header" class="header">
<div class="container" id="header-inner">
<div class="row">
<div id="header-left" class="clearfix">
<div id="logo" class="logo">
<a href="#">
<img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
</a>
</div> <!-- logo -->
</div> <!-- header-left -->
<div id="header-right">
<nav class="navbar navbar-default" id="">
<div class="navbar-header">
<a class="navbar-brand" href="#">Apple Juice</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<!-- Global Navigation -->
<div class="gnav collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown active-->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">order <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- nav navbar-nav -->
</div> <!-- gnav collapse navbar-collapse -->
</nav> <!-- navbar navbar-default -->
</div> <!-- header-right -->
</div> <!-- clearfix -->
</div> <!-- row -->
</div> <!-- container -->
</header>
</div> <!-- wrapper -->
Ah, I usually use clearfix in <div class="row"> or in <header> not in <div id="header-left">, but I wrote that in <div id="header-left">.
your css is wrong please replace one of properties as
#header-left {
float: left;
display: inline-block;
}
This will make sure your left block takes only area that it fits into.
You can use the .navbar-right class:
Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.
Please check the result. Is it what you want to achieve?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Right 1</li>
<li>Right 2</li>
<li>Right 3</li>
</ul>
</div>
</div>
</nav>
<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.7/js/bootstrap.min.js"></script>
Update
I've used <ul class="nav navbar-nav navbar-right"> instead of <ul class="nav navbar-nav"> in your code:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Header -->
<header id="header" class="header">
<div class="container" id="header-inner">
<div class="row">
<div id="header-left" class="clearfix">
<div id="logo" class="logo">
<a href="#">
<img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
</a>
</div> <!-- logo -->
</div> <!-- header-left -->
<div id="header-right">
<nav class="navbar navbar-default" id="">
<div class="navbar-header">
<a class="navbar-brand" href="#">Apple Juice</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<!-- Global Navigation -->
<div class="gnav collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
<a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li>オレンジ</li>
<li>アップル</li>
<li>グレープ</li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li>マグロ</li>
<li>サーモン</li>
<li>エンガワ</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown active-->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li>iPhone</li>
<li>Xperia</li>
<li>Galaxy</li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li>トマト</li>
<li>レタス</li>
<li>枝豆</li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">order <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->
</ul> <!-- nav navbar-nav -->
</div> <!-- gnav collapse navbar-collapse -->
</nav> <!-- navbar navbar-default -->
</div> <!-- header-right -->
</div> <!-- clearfix -->
</div> <!-- row -->
</div> <!-- container -->
</header>
</div> <!-- wrapper -->
I have a problem with the navbar when displayed on a smartphone.
The last item of the menu is a dropdown. It is not displayed unless I enlarge the screen. It is as if there was no more space to display the items of the submenu (while the other dropdwons work perfecty).
Could somebody tell me what mistake I did ? Here is the code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<a class="pull-left"><img src="logo_navbar.png" alt="logo"></a><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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Associazione
<ul class="dropdown-menu">
<li>
Chi siamo
</li>
<li>
Struttura
<li>
Statuto
</li>
</ul>
</li>
<li class="dropdown">
Bilancio Sociale
<ul class="dropdown-menu">
<li>
Bilancio 2015-2016
</li>
<li>
Bilancio 2014-2015
</li>
<li>
Bilancio 2013-2014
</li>
<li>
Bilancio 2012-2013
</li>
</ul>
</li>
<li>
Gara di matematica
</li>
<li>
News
</li>
<li>
Rassegna stampa
</li>
<li>
Iscrizione
</li>
<li class="dropdown">
Contatti
<ul class="dropdown-menu">
<li>
Messaggi
</li>
<li>
Dove siamo
</li>
<li>
Newsletter
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--/.nav-collapse -->
Thank you very much in advance
gabriele
Your code works:
https://jsfiddle.net/8c8x558e/
I think the problem would be your bootstrap links, remember you have to put these links:
<!-- Latest compiled and minified CSS -->
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I think you forgot the Js link.
Remove this css in mobile view .navbar-fixed-top {position: fixed;}
you can use {position: static;}
Also use class="caret" where the is a sub-menu to make sure there is a sub-menu I used it after the text "Contatti". For any question ask me in comment. LiveONFiddle :)
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<a class="pull-left"><img src="logo_navbar.png" alt="logo"></a>
<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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Associazione
<ul class="dropdown-menu">
<li>
Chi siamo
</li>
<li>
Struttura
<li>
Statuto
</li>
</ul>
</li>
<li class="dropdown">
Bilancio Sociale
<ul class="dropdown-menu">
<li>
Bilancio 2015-2016
</li>
<li>
Bilancio 2014-2015
</li>
<li>
Bilancio 2013-2014
</li>
<li>
Bilancio 2012-2013
</li>
</ul>
</li>
<li>
Gara di matematica
</li>
<li>
News
</li>
<li>
Rassegna stampa
</li>
<li>
Iscrizione
</li>
<li class="dropdown dropdown-submenu">
Contatti <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Messaggi
</li>
<li>
Dove siamo
</li>
<li>
Newsletter
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--/.nav-collapse -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
On smaller devices the text ("JH") currently moves underneath the collapsed menu toggle on the left side of the navbar - is there a way to align it so that "JH" is level with the menu toggle but on the right side of the navbar instead? I'm struggling with how to achieve this but I'm sure it's very simple. Many thanks in advance, Jon
My code is as follows:-
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>
<span>About</span>
</li>
<li>
<span>Resume</span>
</li>
<li>
<span>Portfolio</span>
</li>
<li>
<span>Blog</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
http://www.jonhowlett.uk/
Put this
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
inside <div class="navbar-header">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
</div>
You're navbar has add HTML that shouldn't be necessary. See docs.
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
If you want to add a background color to the brand, just use CSS. See example.
.navbar.navbar-custom .navbar-brand {
background: #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="http://www.jonhowlett.uk/home.html">JH</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li> <span>About</span>
</li>
<li> <span>Resume</span>
</li>
<li> <span>Portfolio</span>
</li>
<li> <span>Blog</span>
</li>
<li> <span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
I am trying to get a dropdown to work using twitter bootstrap in the nav but am having trouble. When I click on "More...", nothing shows up.
Any advice?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="bootstrap1.css" rel="stylesheet">
</head>
<body>
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="/">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li class="">
Browse
</li>
<li class="">
About
</li>
<li class="">
FAQ
</li>
<li>
Blog
</li>
<li class="">
Contact
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">More... </a>
<ul class="dropdown-menu" >
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>Sign up</li>
<li class="divider-vertical"></li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
Try adding role="menu" to <ul class="dropdown-menu" >
I got the latest version of bootstrap and it seems to be working now.