I am facing problem in the dropdown in bootstrap. I have attached all the necessary file correctly. But still its not working.
<nav class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
<li>Products</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="button" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe</li>
</ul>
</div>
Make sure your order of placing jquery and bootstrap is correct. Check below snippet which works correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>
<nav class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
<li>Products</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="button" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Subscribe</li>
</ul>
</div>
Related
When I resize the browser the navbar links that say "FIX" drop down into one column. Does anyone know how I can prevent that and keep the links on the same line?
Here is the codepen: http://codepen.io/anon/pen/VvJXNw
<!-- 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="#">
<div class="logo"><img style="width: 21px" src="logo" /></div>
</a>
</div> <!-- end of navbar header -->
<!-- these links dont stay on the same line -->
<ul class="nav navbar-nav pull-left">
<li><a id="<%= #users ? 'active-page' : ''%>" href="/">FIX</a></li>
<li><a id="<%= #users ? 'active-page' : ''%>" href="/">FIX</a></li>
<li><a id="<%= #about ? 'active-page' : ''%>" href="/">FIX</a></li>
</ul>
<!-- 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 navbar-right">
<li>Sign up</li>
<li>Sign in</li>
</ul>
<form class="navbar-form navbar-right hidden-xs hidden-sm" role="search">
<div class="form-group">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You need to place these links inside the navbar-header, then you can use a helper such as navbar-btn to position. Also don't use pull-*, use navbar-left or navbar-right. See Docs.
See working example Snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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-nav" 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 alt="" src="/" />
</a>
<div class="nav navbar-left"> Some Link
Some Link
Some Link
</div>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Sign up
</li>
<li>Sign in
</li>
</ul>
<form class="navbar-form navbar-right hidden-sm hidden-xs" role="search">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
</form>
</div>
</div>
</nav>
Don't use in navbar pull-left.
In custom bootstrap navbar default style is on left.
If you want use two side just add navbar-right to right side of nav.
Bootstrap navbar with form
Demo here:
I have started using bootstrap recently so I am still learning. My problem is on the navigation bar i have created. I have all the contents pulling right but the search bar and tabs are breaking line. I have tried a few things like setting break points to xs and so on.
here is what it looks like.
enter image description here
<div class="container-fluid">
<div class="row-fluid">
</div>
<div class="row-xs pull-right" >
<div class="col-xs">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class"col-xs">
<form class="navbar-form " 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>
</div>
</div>
</nav>
</div>
You're HTML is missing numerous elements row-xs, col-xs, and row-fluid are not classes in Bootstrap3 and you have some syntax errors also.
I would suggest starting out with a standard navbar class and customizing it from there but if you have or want to use columns and row see the Docs on the right way to use these in general.
See working examples of a navbar and a variation of your code in the Snippet.
<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">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
<form class="navbar-form navbar-right" 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>
</div>
</div>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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>
and what does "navbar-toggle collapsed" do.
Thanks
I am trying to make the drop-down go to the extreme right, after the search input and submit button, tried pull-right, navbar-right but to no avail.
Is there a way to achieve this?
<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>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right" 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 pull-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Google</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
I'm trying this:
Really not sure, but what it does if you change the login part ul from:
<ul class="nav navbar-nav pull-right">
to:
<ul class="nav navbar-right pull-right">
You need to make the links after the search form :
<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">
<form class="navbar-form" 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">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Google</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
And this is the CSS for it :
#navbar{
float:right !important;
}
.navbar-form{
display:inline-block;
float:left;
}
Here's the JSFiddle
Note : For the mobile version , you only need to make this under the right media query :
#navbar{
float:none !important;
}
For some reason, the menu icon is not expanding in mobile view, not sure what I did wrong. Can someone take a look at let me know? Thanks!
http://10.60.53.115/staging/sijie/Monster_UX_bootstrap/index.html
HTML:
<nav class="navbar navbar-default navbar-fixed-top" 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" data-toggle="collapse" data-target="navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li role="presentation" class="active">About Us</li>
<li role="presentation">What We Do</li>
<li role="presentation">Join the Team</li>
<li class="form">
<form class="search-container" action="//llamaswill.tumblr.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
<input type="submit" id="search-submit"/>
</form>
</li>
</ul>
</div>
</div><!--end container-fluid-->
You've set your IMG in the incorrect section of the navigation bar. In order for the mobile menu to activate on click you need to move the IMG link to the class="navbar-toggle" button.
.navbar .navbar-header .navbar-toggle {
padding: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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">
<img src="http://placehold.it/40x20/000/000">
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">About Us <span class="sr-only">(current)</span>
</li>
<li>What We Do
</li>
<li>Join the Team
</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>
</div>
</div>
</nav>
<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.6/js/bootstrap.min.js"></script>
Hi guys I'm using bootstrap for a responsive Nav for the first time.. I've looked up a couple answers to similar questions but can't seem to get my Nav toggle button to show.
The button toggles correctly and displays my Nav; but is invisible. Any insight would be greatly appreciated! :)
<!-- NAVIGATION -->
<div class="nav-container">
<div class"navbar navbar-default" role="navigation">
<div class="container inner-container">
<div class="navbar-header">
<img src="img/index/skytek-logo/Skytek_c1_S.png" width="160px" height="90px" alt="Skytek Logo"><p class="navbar-slogan">Engineering Excellence</p>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Support & Services</li>
<li>Sales</li>
<li>News</li>
<li>Contact</li>
<li>Careers</li>
<li>Login</li>
<li class="search-bar">
<form class="navbar-form" role="form" method="get" action="#">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-success">Go</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVIGATION -->
You're missing an equals sign here:
<div class="navbar navbar-default" role="navigation">
----------^
Demo