Buenas a todos.
Utilizando bootstrap quiero realizar un header así.
LOGO - BUSCADOR - ICONOS (2) -------------------------------------------- SEGUNDO MENU
Esto esta hecho pero en el bootstrap responsive es decir para pantallas chicas se ve así.
LOGO ------------------------------------------ BOTON DE MENU DESPLEGABLE
La idea es que en el responsive se vea así.
LOGO ----- ICONOS (2) -------------------- BOTON DE MENU DESPLEGABLE
Espero me halla explicado bien:
Mi código actual es:
Código:
<nav class="navbar navbar-default navbar-fixed-top" style="height: 50px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1-degradate">
<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand" style="padding:0">
<img class="visible-xs-inline-block visible-sm-inline-block" alt="Brand" data-original="/img/favicon-logo.png">
<img class="hidden-xs hidden-sm" alt="Brand" data-original="/img/logo-azul.png">
</a>
</div>
<div class="navbar-default collapse navbar-collapse" id="menu1-degradate">
<form class="navbar-form navbar-left search-form" action="/buscar" method="get">
<div class="input-group">
<input type="text" name="q" value="" required="on" autocomplete="off" placeholder="Buscar..." class="form-control" />
<span class="input-group-addon search-button"><i class="glyphicon glyphicon-search"></i></span>
<input type="submit" id="search-button2" style="display:none" />
</div>
</form>
<ul class="hidden-xs nav navbar-nav navbar-left">
<li class="dropdown">
<a class="label-notification dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<span class="glyphicon glyphicon-globe"></span>
<span class="label label-danger icono-short">50</span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<h3> Notificaciónes </h3>
</li>
<li class="divider"></li>
<li>
<div class="dropdown-messages-box">
<a href="#" class="pull-left">
<img alt="image" class="img-circle" data-original="<?php echo BASE_URL."view/upload/avatar/50/" . $db->isLogged(0, TRUE, "u_avatar") . "";?>">
</a>
<div class="media-body">
<!--small class="pull-right"></small-->
<strong>@max.bizera</strong> te sígue <br>
<small class="text-muted">hace 3 días</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a href="mailbox.html">
<strong>Read All Messages</strong>
</a>
</div>
</li>
</ul>
</li>
<li>
<a class="label-notification dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<span class="glyphicon glyphicon-comment"></span>
<span class="label label-danger icono-short">0</span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<h3> Mensajes </h3>
</li>
<li class="divider"></li>
<li>
<div class="dropdown-messages-box">
<a href="#" class="pull-left">
<img alt="image" class="img-circle" data-original="<?php echo BASE_URL."view/upload/avatar/50/" . $db->isLogged(0, TRUE, "u_avatar") . "";?>">
</a>
<div class="media-body">
<!--small class="pull-right"></small-->
<strong>@max.bizera</strong> te sígue <br>
<small class="text-muted">hace 3 días</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a href="mailbox.html">
<strong>Read All Messages</strong>
</a>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="btn-lg" href="/">
Inicio
<span class="label label-default">+5</span>
</a>
</li>
<li class="dropdown">
<a class="btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="/perfil">
Max
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<div class="dropdown-messages-box">
<a href="#" class="pull-left" style="width: 60px;">
<img alt="image" class="img-circle" style="width: 50px; height: 50px;" data-original="/img/avatar.jpg">
</a>
<div class="media-body">
<h3 style="margin:0; padding: 0;">Max Jl</h3>
<small class="text-muted">@max</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<a href="">Configurar Cuenta</a>
</li>
</ul>
</li>
<li>
<a class="btn-lg" href="/salir">
<span class="glyphicon glyphicon-remove"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>