I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. http://twitter.github.com/bootstrap/#
In mine, the arrow indicating that it's a dropdown shows on the menu but when I hover or click on it it doesn't reveal my dropdown links. I think I've included all the necessary classes, and I don't believe Twitter's requires javascript.
Can you see what I'm doing wrong?
My dropdown
<div class='topbar' data-dropdown="dropdown">
<div class='fill'>
<div class='container'>
<ul class="nav">
<li><%= link_to 'Home', main_app.root_path %></li>
<li><%= link_to 'Outlines', main_app.outlines_path %></li>
<li class="dropdown">
Assessment
<ul class="dropdown-menu">
<li>second link </li>
<li>third link </li>
</ul>
</li>
..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work.
Twitter Bootstrap
<div class="topbar" data-dropdown="dropdown">
<div class="topbar-inner">
<div class="container">
<h3>Project Name</h3>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</ul>
</div>
</div><!-- /topbar-inner -->
</div>
It actually requires inclusion of Twitter Bootstrap's dropdown.js
http://getbootstrap.com/2.3.2/components.html
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
It's also possible to customise your bootstrap build by using:
http://twitter.github.com/bootstrap/customize.html
All the plugins are included by default.
You must include jQuery in the project.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I didn't find any doc about this so I just opened a random code example from tutorialrepublic.com
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
Hope this helps someone else.
I had a similar problem and it was the version of bootstrap.js included in my visual studio project. I linked to here and it worked great
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- core CSS -->
<link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<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" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Terms & Condition</li></li>
<li>Contact</li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
</body>
</html>
Related
I have navbar and it have some menus in the anchor tag.
When I click the menu, it remains selected but when I click somewhere in the background then it loses that active class.
How to overcome this, please help
Below is the snippet of same
<!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>
<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 have a nav bar with 3 li items. I have a forth item that I would like to align along the extreme left side of the bar. When I add the forth item as a div within the nav bar, the 3 li items are skewed to the right. I'm using bootstrap to style the nav bar. Here is the markup:
<nav class="navbar navbar-toggleable-md navbar-inverse">
<ul class="navbar-nav">
<li style="float: left; color: white">
My Text Here
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</ul>
</nav>
I've tried applying sone styles the forth item, but they have no affect. Any pointers?
You can take your first item out of the ul and put it inside an element with the navbar-brand class which auto pulls to the far left and styles the text so it is noticeable. You can also use the classes navbar-left and navbar-right to pull elements to the left or right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-inverse">
<div class="container">
<div class="navbar-header navbar-left">
<p class="navbar-brand">My Text Here</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</ul>
</div>
</nav>
I recommend you to use standards that bootstrap provide. Always you can customize adding some classes. As you see I have add the brand to your nav, I think it was what you looking for.
Check the second nav, you can see there more usefull classes. (Check it snippet on full page).
Check the third nav is how to add your logo as an img.
.this-is-my-brand {
height:100%;
margin:10px;
font-family:Verdana;
text-shadow:1px 1px 1px #fa8911;
}
.logo{
width:25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse">
<ul class="navbar-nav">
<a class="navbar-brand this-is-my-brand" href="#">Brand</a>
<li style="float: left; color: white">
My Text Here
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</li>
</ul>
</nav>
<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>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="logo" alt="Brand" src="https://i.stack.imgur.com/MybMA.png">
</a>
</div>
</div>
</nav>
I looked everywhere but can't find why my bootstrap button doesn't show up when I make my screen smaller(When i make my navbar smaller). It works on codepen.io but not on my computer editor. When I say button I mean 3 bar button on right side like this https://i.stack.imgur.com/2omaL.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content = "width=device-width", initial-scale=1>
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css>
<title>Portfolio</title>
</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>
</body>
</html>
change this <link rel="stylesheet" href="style.css> to <link rel="stylesheet" href="style.css"> you forgot to add closing quote
working fine here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content = "width=device-width", initial-scale=1>
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</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>
</body>
</html>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<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>
<link rel = "stylesheet" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class = "container">
<div class="navbar" >
<div class ="navbar-header">
<!-- Place your logo here -->
<div class="navbar-brand" >
<img src="images/logo.png" alt="logo text">
</div>
</div>
<button type="button" class="navbar-toggle navbar-right " data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"><hr><hr><hr></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class=" collapse navbar-collapse nav-collapse ">
<ul class="nav navbar-nav navbar-right">
<!-- Add require site page navigation -->
<li> <i class="icon-globe"></i>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user"></i>About Us<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>The Company</li>
<li>Vision</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user" style="color:#000000"></i>Team<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Meet Our Team</li>
<li>Our Sister concerns</li>
</ul>
</li>
<li><i class="icon-pencil"></i>Projects</li>
Refer
Contact Us
Web
Locate
</ul>
</div>
</div>
</div>
check the problem at www.alaknandainfra.com/refer.php the nav bar collapses suddenly in mobile view . i spent many hours but can't find the mistake . and i want to align the toggle menu on the right side . when user click on toggle button the menu should come on the right side
If you remove the height:0 at bootstrap-responsive.min.css:1240, that issue seems to be fixed.
.nav-collapse,.nav-collapse.collapse{
/* height:0; */
overflow:hidden
}
I am using the Bootstrap 3.0 framework and Modern Business theme (http://startbootstrap.com/modern-business). When using the default Modern Business nav settings, the main menu dropdowns work brilliantly as they should on mobile devices. However, when I change the menu to be "nav-justified" in the HTML code (using Bootstrap's "nav-justified" CSS class), the menu does not work as expected.
When you tap any menu item with dropdowns, it shows a navigation dropdown on the far left side, which runs outside of the parent CSS frame:
I am also using the Sticky Nav solution found here: How to use the new affix plugin in twitter's bootstrap 2.1.0?
Here is my HTML code for the menu:
<nav class="navbar navbar-inverse" role="navigation">
<div id="nav-wrapper">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-justified">
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>1 Column Portfolio</li>
<li>2 Column Portfolio</li>
<li>3 Column Portfolio</li>
<li>4 Column Portfolio</li>
<li>Single Portfolio Item</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog Home 1</li>
<li>Blog Home 2</li>
<li>Blog Post</li>
</ul>
</li>
<li class="dropdown">
Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Width Page</li>
<li>Sidebar Page</li>
<li>FAQ</li>
<li>404</li>
<li>Pricing Table</li>
</ul>
</li>
</ul>
</div> <!-- collapse -->
</div> <!-- span12 -->
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
</div> <!-- nav-wrapper -->
</nav>
And here is the script I have at the bottom of my HTML:
<script>
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
</script>
Here, also, is the obligatory JSFiddle to examine (JS and CSS code linked in the JSFiddle panel on the left): http://jsfiddle.net/L94Mj/
I'm sure I'm somehow dancing around the answer, but this thing has had me stumped for two days now, and I need a fresh brain to look at things. I'm happy to provide whatever extra code is needed to help find the answer.