Basically I am trying to convert the bootstrap navbar into a tool bar. On that toolbar I added some btn-groups with dropdowns which work fine before the media query collapses it. Once it has been collapsed the dropdown-menus cannot be seen, although the element is there and it casts the shadow that it would if it were there. How do I get these drops downs to show up after the collapse?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> INDEX </title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="mycss/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
</head>
<body>
<nav class="navbar navbar-footer">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#footNav"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="#">Tool Bar</a>
</div>
<div class="collapse navbar-collapse" id="footNav">
<!-- 1st btn-group (No Dropdown) -->
<div class="btn-group" role="group" aria-label="..." style="margin-right: 7px">
<button type="button" class="btn btn-default">Yesterday</button>
<button type="button" class="btn btn-default">Today</button>
<button type="button" class="btn btn-default">Tomorrow</button>
</div>
<!-- 2st btn-group doesn't work after collapse -->
<div class="btn-group" role="group" aria-label="..." style="margin-right: 7px">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Past
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Past</li>
<li>This</li>
<li>Next</li>
</ul>
</div>
<button type="button" class="btn btn-default">W</button>
<button type="button" class="btn btn-default">M</button>
<button type="button" class="btn btn-default">3M</button>
<button type="button" class="btn btn-default">Y</button>
</div>
<!-- 3rd btn-group doesn't work after collapse -->
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Date Range
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<div class="input-group" style="padding-bottom: 4px;">
<span class="input-group-addon" >From:</span>
<input class="datepicker" style="height: 30px; width:120px; font-size: 18px; padding:10px;" name="startDate">
</div>
<div class="input-group">
<span class="input-group-addon" >To:</span>
<input class="datepicker2" style="height: 30px; width:120px; font-size: 18px; padding:10px;" name="endDate">
</div>
</ul>
</div>
</div>
</nav>
</body>
</html>
I use the standard bootstrap stuff with the exception of the css changes
/*Calendar tool Bar*/
.navbar {
border-radius: 0px;
}
.dropup{
display: inline-block;
}
.dropdown-menu .input-group .input-group-addon:first-child {
width: 63px;
}
.dropdown-menu {
padding: 4px 4px 4px 4px;
min-width: 30px;
}
.navbar-footer {
background-color: #f8f8f8;
border-color: #e7e7e7;
position: fixed;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
vertical-align: middle;
}
.navbar-footer .navbar-toggle:hover,
.navbar-footer .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-footer .navbar-toggle {
border-color: #ddd;
}
.navbar-footer .navbar-toggle .icon-bar {
background-color: #888;
}
button {
margin-top: 8px;
}
You just need to override the bootstrap .navbar-collapse.in class to make it visible even if it overflows vertically.
.navbar-collapse.in {
overflow-y: visible;
}
Working example.
Related
I know this has been asked a million times and I thought I had done it right, but when my friend checked my site out on his screen there was a gap between the footer and the bottom of his screen, because on my screen it sits perfectly.
The php code is from laravel, but I think this is a css issue.
I can't see where I went wrong with this.
My css
html, body{
height: 100%;
width: 100%;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
}
.contact_wrapper {
background: #fff none repeat scroll 0 0;
height: 234px;
position: absolute;
}
My template
<body>
<div class="container-fluid">
<!-- BEGIN MENU SECTION -->
<nav class="navbar navbar-default main_menu_wrapper">
<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 href="{!! url('/') !!}" class="navbar-brand">
<img src="{!! asset("img/logo-for-site2.jpg") !!}">
</a>
</div>
<div class="collapse navbar-collapse menu_wrapper" id="bs-example-navbar-collapse-1">
<form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search">
{{ csrf_field() }}
<div class="form-group">
<input type="text" class="form-control" name="search" placeholder="Search...">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
#foreach($menus_child as $grandfather)
#if($grandfather->menu_id)
<li>
#elseif($grandfather->title == 'Home')
<li class="parent {!! menu_active($grandfather->id) !!}">
#elseif(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
<li class="dropdown {!! menu_active($grandfather->id) !!}">
#else
<li class="parent {!! menu_active($grandfather->id) !!}">
#endif
#if(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle hidden-xs hidden-sm hidden-md desktop_dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{!! $grandfather->title !!} <span class="caret"></span>
</a>
<a href="javascript:void(0);" class="dropdown-toggle visible-xs visible-sm visible-md mobile_dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{!! $grandfather->title !!} <span class="caret"></span>
</a>
#else
{!! Html::link(getSeoLink($grandfather->id), $grandfather->title) !!}
#endif
#if(count($grandfather->menusP))
<ul class="dropdown-menu desktop">
#foreach($grandfather->menusP as $father)
#if($father->menu_id)
<li class="parent_child">
#else
<li>
#endif
{!! Html::link(getSeoLink($father->id), $father->title) !!}
#endforeach
</ul>
#endif
#endforeach
</ul>
</div>
</div>
</nav>
<!-- END MENU SECTION -->
<!-- BEGIN CONTENT SECTION -->
#yield('content')
<!-- END CONTENT SECTION -->
<!-- BEGIN FOOTER SECTION -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 contact_wrapper">
#include('contact::contact')
</div>
</div>
<!-- END FOOTER SECTION -->
</div>
I think I solved it. What I did was I put a div around #yield('content') and I added some extra css
html, body{
height: 100%;
width: 100%;
margin: 0; /* Add css */
padding: 0; /* Add css */
}
.container-fluid {
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
min-height: 100%; /* Add css */
position: relative; /* Add css */
}
.body-content{ /* Add css */
padding-bottom: 234px; /* Add css */
}
.contact_wrapper {
background: #fff none repeat scroll 0 0;
height: 234px;
position: absolute;
bottom: 0; /* Add css */
}
I have a navbar brand image of 408px x 130. The navigation look correct in browser but i cannot make it responsive on mobile. Also the menu button does not appear. This is my navbar
<nav class="navbar default-nav">
<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="/"> <img alt="#{site_title}" src="/images/logo_white.png" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right">
<li>1</li>
<li>2</li>
<li>3
</li>
<li></li>
<li class="dropdown">Accedi
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
<form action="/" method="post" class="form">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" id="username" name="email" placeholder="Email..." class="form-username form-control" />
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password" />
<div class="help-block text-right">
<a href="/resetPassword"> <span class="login-link">Password dimenticata?</span>
</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<div class="checkbox">
<label> <input type="checkbox" id="rememberme" name="remember-me" /> <span>Ricordami</span>
</label>
</div>
</form>
</div>
<div class="bottom text-center">
<span>Non sei iscritto?</span> <a class="login-link" href="/register"><strong>Registrati</strong></a>
</div>
</div>
</li>
</ul></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
The style is pure bootstrap css out of this
navbar {
min-height: 130px;
line-height: 130px;
z-index: 1;
height: 130px;
}
which i need to fit the nav to the brand image height.
The problem is that when i use a mobile phone, the brand image does is not responsive, so the menu button does not appear and the logo gets all the screen...
JSFiddle
Technically the nav button is still there but because the nav element doesn't have the .navbar-default class, it isn't inheriting Bootstrap's styles. You can fix this by adding the following:
CSS
.navbar-toggle {
border-color: #ddd;
top: 37px;
}
.navbar-toggle .icon-bar {
background-color: #888;
}
You'll also need to add jQuery and Bootstrap js to enable the nav toggle for the menu
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
To fix the image you'll need to do the following (styles may need adjusting based on how you need it to look)
You can set the height of .navbar-brand to auto and remove the height from .navbar. Also, changing its box-sizing to content will allow the image to sit within the padding of the element. You'll then need to add the .img-responsive class to the logo image element.
CSS
.navbar-brand {
box-sizing: content-box;
height: auto;
}
#media (max-width: 767px) {
.navbar-brand {
max-width: 15em;
}
}
/* Optional to replace line-height centering */
#media (min-width: 768px) {
.nav {
position: relative;
top: 60px; /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */
}
}
HTML
<!-- Add img-responsive class to your logo -->
<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="/">
<img alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" />
</a>
</div>
Here's a Codepen example: https://codepen.io/raptorkraine/pen/YrKMgg
So, I'm playing around with Bootstrap, I'm a total noob. At any rate, to change the nav-brand, I had to use:
.navbar-brand {
color: #da212f!important;
text-shadow: 2px 2px 2px #DDD;
}
That said, I had to use the !important declaration to get the text color to change. Is there a way around that (I'm just curious).
The problem is, I'm trying to change the background color and the font color for the li.active in the nav bar.
Here is the HTML
<!-- Start Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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="index.html">Mr. Robot</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">Home <span class="sr-only">(current)</span></li>
<li>Hardware</li>
<li>Robots</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
For the life of me, I can't get the background color to change and I'd like to know how to change the font color as well.
Here was the CSS Options I've tried:
Option 1
li.active {
background-color: #da212f!important;
color: #fff!important;
}
Option 2
.navbar-nav > li.active {
background-color: #da212f!important;
color: #fff!important;
}
I've tried both, with and without the !important declaration. So, if someone could help me and point me in the right direction, I'd appreciate it.
For the logo brand you can add an id to the navbar-brand element and that will give it higher css specificity.
#myBrand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
For the active link you use the following
.nav.navbar-nav > li.active a{
background: none;
background-color: #da212f;
color: #fff;
}
#myBrand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
.nav.navbar-nav > li.active a{
background: none;
background-color: #da212f;
color: #fff;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<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 id="myBrand" class="navbar-brand" href="index.html">Mr. Robot</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">Home <span class="sr-only">(current)</span></li>
<li>Hardware</li>
<li>Robots</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Try this
.navbar-header > .navbar-brand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
As there is a div with class="navbar-header" and then in that div you can find an anchor tag with calss = "navbar-brand" where you have done branding as "Mr. Robot".
For active li tag:
.nav.navbar-nav > li.active a{
background-color: #da212f;
color: #fff;
}
Adding a screenshot for your reference.
To achieve expected result, use below CSS
.navbar-default .navbar-nav>.active>a:active{
background-color: #da212f;
color: #fff;
}
.navbar-brand {
color: #da212f!important;
text-shadow: 2px 2px 2px #DDD;
}
.navbar-default .navbar-nav>.active>a:active {
background-color: #da212f;
color: #fff;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Start Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Mr. Robot</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">Home <span class="sr-only">(current)</span></li>
<li>Hardware</li>
<li>Robots</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm trying to figure out how to make the above code behave well on displays > 768px and < 768px. Right now is working fine for resolutions below 768px, but I can't make it work for resolutions above that.
That's the what I'm trying to do:
Resolution above 768px - Full page (search box with 100% remaining width):
Resolution below 768px (only search box visible):
Code:
.navbar .navbar-form {
padding: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.clear {
width: 1%;
display: table-column;
}
#media(max-width:767px) {
.navbar .navbar-form {
padding-left: 15px;
padding-right: 0;
}
.navbar .navbar-form .input-group {
padding-right: 15px;
}
.navbar .navbar-form .form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-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 navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 hidden-xs" href="/">Title</a>
<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="clear hidden-sm hidden-md hidden-lg"></span>
<span class="input-group-btn hidden-xs">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Webpage 1</li>
<li>Webpage 2</li>
</ul>
</div>
</div>
</nav>
Whew, you have yourself a nasty little problem here. It took me a while, but I think I've gotten you a solution together.
First, you need to do the following:
Add display: inline to your form-group
Add display: table to your input-group
Add width: 1% to your input-group-btn
These changes are from this issue here (what you want, but keeps the search bar inside the collapse menu) - Bootstrap 3 - How to maximize input width inside navbar
The next changes you need to make are for when you are above the 768px breakpoint, otherwise it will mess up your collapse menu.
#media(min-width:768px) {
.container-fluid {
display: flex;
}
.navbar-header {
flex: 1;
}
}
Lastly, you need to remove navbar-right from your navbar-form.
Here is a JSFiddle - An embedded snippet is also included.
.navbar .navbar-form {
padding: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.clear {
width: 1%;
display: table-column;
}
#media(max-width:767px) {
.navbar .navbar-form {
padding-left: 15px;
padding-right: 0;
}
.navbar .navbar-form .input-group {
padding-right: 15px;
}
.navbar .navbar-form .form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
#media(min-width:768px) {
.container-fluid {
display: flex;
}
.navbar-header {
flex: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-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 navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 hidden-xs" href="/">Title</a>
<form class="navbar-form" role="search">
<div class="form-group" style="display: inline">
<div class="input-group" style="display: table">
<input type="text" class="form-control" placeholder="Search for..."/>
<span class="clear hidden-sm hidden-md hidden-lg"></span>
<span class="input-group-btn hidden-xs" style="width: 1%">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Webpage 1</li>
<li>Webpage 2</li>
</ul>
</div>
</div>
</nav>
I have the following CSS code, and my problem is that my
nav bar comes on top of my header block. How can I move
the nav bar straight down from the header?
header {
background: black;
height: 60px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
header img {
float: left;
margin-right: 10px;
position: relative;
}
header h1 {
color: white;
font: 26px Helvetica, Arial, sans-serif;
line-height: 60px;
margin: 0;
vertical-align: middle;
}
nav {
background: black;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
give the nav a margin-top that is the same height of your navbar.
nav {
background: black;
margin: 0;
margin-top:60px;
padding: 0;
position: absolute;
width: 100%;
}
#H.A; you give position absolute to your header block & nav block . So, when you give position absolute to an element then the element remove for the normal flow
CSS:
nav {
top:60px;
padding: 0;
position: absolute;
width: 100%;
}
Read this article for more http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
<!DOCTYPE html>
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-top{
position:static;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- 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>
<a class="navbar-brand topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>