Website header col and pull right issue - html

Question

I was developing an example using Bootstrap 3.3.5. I was trying to create a header (logo + navigation + search) using the grid system. My problem is that the search input collapses to a second screen if I don't set a width on the nav.
I created the following CodePen to show the problem:
http://codepen.io/giancorzo/pen/jbqGJo
Like I said my solution was to add the following code:
nav {
width: 503px;
}
But this doesn't work well in responsive (I don't want to patch it for each breakpoint).
Any idea? Perhaps I'm doing the HTML wrong.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
padding: 1%;
}
header h1 {
margin-top: 0;
}
nav ul {
list-style: none;
margin: 0px;
}
nav ul li {
float: left;
padding: 0% 2%;
}
nav ul li:last-child {
padding-right: 0px;
}
nav ul li a {
line-height: 36px;
text-decoration: none;
display: block;
}
nav ul li .separator {
line-height: 36px;
}
nav .navbar-form {
margin: 0px;
padding: 0px;
}
#media (max-width: 768px) {
nav {
width: auto;
}
header h1 {
font-size: 30px;
}
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="col-xs-4">
<h1>Site name</h1>
</div>
<div class="col-xs-8">
<nav class="pull-right">
<ul class="clearfix">
<li>
<a href="#">
<i class="glyphicon glyphicon-home"></i>
<span>Noticias</span>
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-home"></i>
<span>Enlaces RSS</span>
</a>
</li>
<li class="hidden-xs">
<div class="separator">|</div>
</li>
<li class="hidden-xs">
<div class="search">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Ingresa tu búsqueda">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>

Answer 1

This might give you some ideas if nothing else. Pretty minimal.
.navbar .navbar-brand {
font-size: 35px;
color: #444;
}
.navbar .navbar-toggle .icon-bar {
background: #444;
}
.navbar .navbar-right .separator {
margin-top: 12px;
margin-left: 5px;
}
<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">
<div class="container">
<!-- 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="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-right hidden-xs" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Ingresa tu búsqueda">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><i class="glyphicon glyphicon-home"></i> Noticias
</li>
<li><i class="glyphicon glyphicon-home"></i> Enlaces RSS
</li>
<li class="separator hidden-xs">|</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>