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.
Related
I want to achieve html layout something like this, using Twitter bootstrap
i want it to be responsive, in both mode, desktop and mobile, like example below
desktop mode
mobile mode
This is code I tried so far
<!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>
<header >
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://i.stack.imgur.com/G2Xgp.png">
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li ><a href='#'>FR</a></li>
<li ><a href='#'>EN</a></li>
<li ><a href='#'>KR</a></li>
</ul>
</div>
<!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right" role="menu">
<li><a href='#' >HOME</a></li>
<li><a href='#' >ABOUT US</a></li>
<li><a href='#' >TEST</a></li>
<li><a href='#' >TEST</a></li>
<li><a href='#' >TEST</a></li>
<li><a href='#' >TEST</a></li>
</ul>
</ul>
</div>
</div>
</header>
</body>
</html>
Any help appreciated
It seems that you are using 100% logo size.
The easiest way to do this to add css max-width property to the logo. For example:
.navbar-brand img{
max-width: 100px;
}
It will be responsive as the logo will be assigned max-width property which makes logo stretchable.
You can make the width according to what you think suits best to your design.
I want to achieve html layout something like this, using Twitter bootstrap
i want it to be responsive, in both mode, desktop and mobile, like example below
desktop mode
mobile mode
This is code I tried so far
<!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>
<header>
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://i.stack.imgur.com/G2Xgp.png">
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>FR</a></li>
<li><a href='#'>EN</a></li>
<li><a href='#'>KR</a></li>
</ul>
</div>
<!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right" role="menu">
<li><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT US</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
</ul>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
Any help appreciated
try this...! may be this will help you..! i have added some custom css in head, take a look..!
<!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>
<style>
.navbar{
background: #540d1f;
padding: 25px 0;
}
.container-fluid{
background:#bcaa60 !important;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-brand{
position: relative;
top: -45px;
}
#media only screen and (max-width: 767px) {
.navbar-brand{
position: relative;
top: -45px;
left:30%;
}
}
</style>
</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="#">
<img width="90px" src="https://i.stack.imgur.com/G2Xgp.png">
</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>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
I am working on a project that has a pop-up menu when the user clicks a link in the menu bar but it always conflict with the bootstrap-responsive.min.css, file making my menu bar not clickable.
How do I resolve it? This is my code
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/bootstrap-responsive.min.css" rel="stylesheet"> -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/pages/dashboard.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
</head>
<body>
<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>
<div class="nav-collapse">
<a href="index.php">
<img src="../images/logo2.png" alt="Grace">
</a>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-cog"></i> Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Fly</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-user"></i><?php echo $userRow['L_name']; echo ' '. $userRow['F_name']; echo ' '. $userRow['O_name']; ?> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
Sign Out
</ul>
</li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
<!--/.nav-collapse -->
</div>
<!-- /container -->
</div>
<!-- /navbar-inner -->
</div>
<!-- /navbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="container">
<ul class="mainnav">
<li class="active">
<i class="icon-dashboard"></i><span>Dashboard</span>
</li>
<li>
<i class="icon-list-alt"></i><span>My Profile</span>
</li>
<li>
<i class="icon-facetime-video"></i><span>My Referrals</span>
</li>
<li>
<i class="icon-bar-chart"></i><span>Provide Help</span>
</li>
<li>
<i class="icon-list-alt"></i><span>Get Help</span>
</li>
<li class="dropdown">
<i class="icon-long-arrow-down"></i><span>My Accounts</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Transaction</li>
<li>Prove of Payment</li>
<li>My Wallet</li>
<li>Testimony</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
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 -->
I am a beginner with html and bootstrap, and I try to set a nice nav-bar with a dropdown item. I am currently reviewing the nav-bar from http://getbootstrap.com/examples/navbar-fixed-top/, but the dropdown toggle does not happen in my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<meta content="" name="description"></meta>
<meta content="" name="author"></meta>
<title>Baroum</title>
<link rel="stylesheet" href="./css/bootstrap.min.css"></link>
<link rel="stylesheet" href="./css/navbar-fixed-top.css"></link>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" 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>
<a class="navbar-brand" href="#">Baroum</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" aria-expanded="false" role="button" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li 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>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
Try this code every thing works fine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<meta content="" name="description"></meta>
<meta content="" name="author"></meta>
<title>Baroum</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<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">
<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" role="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 <span class="caret"></span>
<ul class="dropdown-menu" role="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><!-- /.container-fluid -->
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" 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>
<a class="navbar-brand" href="#">Baroum</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" aria-expanded="false" role="button" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li 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>
</html>
You can check this code on plunker its working fine.