I'm trying to create a responsive header in Bootstrap and am having problems getting it right for mobile devices - it look good for large displays. Here is my html code for layout. I would highly appreciate your help!!! The pic is below the code. Thank you!!!
<section class="container">
<!--HEADER-->
<div class="row header" >
<div class="col-md-6">
<div class="logo">
<img src="img/logo.png" class="img-responsive" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/Logo-->
</div>
<div class="col-sm-6 col-lg-6">
<!--Top Utility Links-->
<div class="col-sm-12">
<ul class="utility">
<li>Home</li>
<li>contacts</li>
<li>Help</li>
</ul>
</div><!--/col-sm-12 UTILITY-->
<!--SEARCH-->
<div class="col-md-8 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default search" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</div>
<!--/input-group-btn -->
</div>
<!--/input group -->
</form>
</div><!--/col-sm-8 SEARCH-->
</div>
<!-- <nav class="navbar navbar-default" role="navigation">-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li>ABOUT</li>
<li>SERVICES</li>
<li class="dropdown">
HISTORY <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Another link</li>
<li>One More Link</li>
</ul>
</li>
</ul>
</div>
<!-- </nav>-->
</div>
Related
I have created a navbar but when I try to resize the screen, at one point search bars comes below rather than collapsing. MY code is :
//row start
<div class="row">
//navbar class with affix used in css
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="150">
<div class="container-fluid">
<div class="container">
<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="#">Home</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Technology</li>
<li>Sports</li>
<li>Science</li>
<li>Entertainment</li>
<li>Science</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Life</li>
<li>Tours and Travels</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form style="float:right" class="navbar-form" role="search" aria-expanded="false">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
I see the 'More' dropdown you have there as a layout compromise and I just feel that more compromise is needed. I've condensed all menu links in a dropdown, on small screens.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<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="#">Home</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav visible-sm">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Technology</li>
<li>Sports</li>
<li>Science</li>
<li>Entertainment</li>
<li>Science</li>
<li>Life</li>
<li>Tours and Travels</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav visible-md visible-lg">
<li>Technology</li>
<li>Sports</li>
<li>Science</li>
<li>Entertainment</li>
<li>Science</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Life</li>
<li>Tours and Travels</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><form style="float:right" class="navbar-form" role="search" aria-expanded="false">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
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
In bootstrap 3, i have a nav bar, with an form bar.
I try to add another section just to the right of the search button.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<nav role="navigation" class="navbar navbar-default pull-right">
<div class="container-fluid">
<form class="navbar-form" role="search">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li id="logout"><i class="glyphicon glyphicon-log-out"></i>Déconnexion
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
Righ now, the other section is below, like you can see on the image.
If you want to use float:right that is what navbar-right does, simply invert order of form and dropdown. right floated element must be placed BEFORE others in order to make others floats around them.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<nav role="navigation" class="navbar navbar-default pull-right">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li id="logout"><i class="glyphicon glyphicon-log-out"></i>Déconnexion
</li>
</ul>
</li>
</ul>
<form class="navbar-form" role="search">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
</div>
Unless you're applying other changes to the navbar, you shouldn't need the extra classes you've applied (col-sm-12/pull-right/etc). Just use the default classes and structure and but reorder your right floated navigation elements so they're in the order you want.
See example.
<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">
<!-- 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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Paul Smith <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-lock"></i> Changer mot de passe
</li>
<li><i class="glyphicon glyphicon-log-out"></i> Déconnexion
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="inactiveLodger">Locataire inactif</label>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
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