The button that is used on mobile devices to view the navbar is not showing up when I make the browser window size smaller to see how it looks on mobile. Here is a CodePen to see my code
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><h4>EmulateOS.tk</h4></a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Mac OS9</li>
<li>DOS</li>
<li>Windows '95</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</div>
</div>
The nav is supposed to disappear on mobile screens - in mobile views, the menu is visible by activating the menu by clicking a button. The navbar-collapse class ensures this. See the Bootstrap docs for how to achieve this:
http://getbootstrap.com/components/#navbar
And their examples for different ways this can be implemented:
http://getbootstrap.com/getting-started/#examples
Specifically, this is the critical aspect for your code:
<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>
Your code is missing few boot strap styles. Here is the working code -
http://codepen.io/anon/pen/BzAWVa
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Course</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body {
padding: 60px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<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="#">EmulateOS.tk</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Mac OS9</li>
<li>DOS</li>
<li>Windows '95</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"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div><!--/.nav-collapse -->
</nav>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign up for the newsletter</h4>
<div class=modal-body>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Related
I use two Bootstrap 3 navbars, first one is default and the second is inverse. The problem is when I display the page in mobile devices the two are collapsed normally, but when I extend the second navbar both extended together. Also, when I collapse the second both of them are collapsed.
<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white; margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="" class="img-responsive" href="#" style="padding-left:50px;">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
<div class="col-xs-offset-3 col-xs-6 text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<form class="navbar-form" role="search" style="padding-top:15px">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
<li><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</li>
<li><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</li>
</ul>
</div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
<!-- <div class="container"> -->
<div style="margin-left:5px;margin-right:5px">
<div class="navbar-header">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white">
<li>#Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
</ul>
</div>
</div>
</div>
The problem is that, your second toggle button has data-target=".navbar-collapse" which targets both navbars. Use an id on the second collapsible and target it with that, just like in the example below (I use #bs-example-navbar-collapse-2 here).
<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white; margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="" class="img-responsive" href="#" style="padding-left:50px;">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
<div class="col-xs-offset-3 col-xs-6 text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<form class="navbar-form" role="search" style="padding-top:15px">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
<li><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</li>
<li><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</li>
</ul>
</div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
<!-- <div class="container"> -->
<div style="margin-left:5px;margin-right:5px">
<div class="navbar-header">
<!-- Note: data-target="#bs-example-navbar-collapse-2" -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Note the new id: #bs-example-navbar-collapse-2 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" style="color:white">
<li>#Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
</ul>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/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.1.1/js/bootstrap.min.js"></script>
You can find the navbar and jumbotron divs below. I have used bootstrap, however after several efforts of trying to correct the code I could not find the issue.
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="#">Ankur Chavda</a>
</div>
<div id="navbar" class="navbar-collapse navbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li class=""><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</li>
<li class=""><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</div>
>Jumbotron
<div class="jumbotron"> //jumbotron
<div class="container">
<div class="row">
<p>hello</p>
</div>
</div>
</div>
</body>
Elements with the class .navbar have a 20px bottom margin. Remove it with:
.navbar {
margin-bottom:0;
}
bootply example
I cleaned up your code and added space between navigation bar and the jumbotron.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="#">Ankur Chavda</a>
</div>
<div id="navbar" class="navbar-collapse navbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li class=""><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</li>
<li class=""><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</div><br><br><br>
<!--Here <br> is used for giving space between the navigation bar and jumbotron-->
<!-- Jumbotron -->
<div class="container">
<div class="jumbotron">
<div class="row">
<p>hello</p>
</div>
</div>
</div>
</body>
</html>
I'm creating a navbar-fixed-top for my page and when the navbar is collapsed (e.g. for small viewports), there is extra space between the "Brand" name and the expand menu icon.
Here is a picture of what is happening:
Extra Space in Collapsed Navbar
And here's my navbar code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class ="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navTop" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>
About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"
style="padding-bottom: 7px;"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
Can you help me figure out how to remove the extra space? Thanks!
Your navbar-header should enclose the button, it currently ends before the button starts. Also, (depending on your use case) the form doesnt need to be inside a ul and causes display issues if it is actually. See Docs
See working Example 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.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-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<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>
<div class="navbar-collapse collapse" id="navTop">
<ul class="nav navbar-nav">
<li>
About
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
see if you have the following. Hope it helps
.navbar-brand {float: left;} and .navbar-toggle{float: right;}
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 a bootstrap based html that looks the way I want in Bootply, but in my page the query field looks narrower than it should. I just don't know what is wrong.
Here is the code:
<nav class="navbar navbar-inverse 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="#">Link</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Welcome <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sair</li>
</ul></li>
</ul>
<form class="navbar-form" method="post">
<div class="form-group" style="display: inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Busca" name="q">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
<!--/.navbar-collapse -->
</div>
Here is the desired result:
Here is the real result:
What you're seeing the default behavior. You can easily adjust this to accommodate your needs though. Assign the form a new class, add the appropriate width and you may want/need to adjust the top position.
See working Snippet at Full Page.
#media (min-width: 768px) {
.navbar-form-fw {
width: 95%;
}
.input-group.input-group-fw {
top: 8px;
}
}
<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-inverse 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="#">Link</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Welcome <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sair
</li>
</ul>
</li>
</ul>
<form class="navbar-form-fw" method="post">
<div class="form-group">
<div class="input-group input-group-fw">
<input type="text" class="form-control control-form" placeholder="Busca" name="q"> <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>