Estoy tratando de hacer que el imput-type de la barra de navegación para buscar sea solo una imagen de lupa, y una vez pinchando, toda la barra de navegación se transforme en el input-text, cambiando también de color y ligeramente la altura de toda la barra. Hasta ahora solo he conseguido lo que muestra mi código, en el cual ya me ayudaron (@Camilo Vasquez, @Pepo Gonzalez, @Alvaro Montoro), y revisando documentación de W3schools. Si alguien me puede dar alguna idea para continuar construyendo mi web. Gracias.
/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/
html, body {
height:100%;
margin:0px;
color:#444444;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font:400 16px/1.8 sans-serif;
}
.nav-navbar-nav{
font-size: 5;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position:relative;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.bgimg-1 {
background-image:url("../imagenes/bg_01.jpg");
height:100%;
}
.bgimg-2 {
background-image:url("../imagenes/bg_02.jpg");
height:100%;
}
.bgimg-3 {
background-image:url("../imagenes/bg_03.jpg");
height:100%;
}
.caption {
position:absolute;
left:10%;
top:48%;
width:80%;
margin:auto;
color:#FFFFFF;
font-size:24px;
text-align:center;
letter-spacing:10px;
background-color:#444444;
}
h2 {
text-transform:uppercase;
font:20px sans-serif;
letter-spacing:4px;
color:#444444;
}
a {
text-decoration:none;
letter-spacing:3px;
}
.navbar-nav{
margin-left: 5% !important;
}
#center{
padding-right:2%;
}
#header{
position: fixed;
width: 100%;
z-index: 1000;
font-size: 6
}
.navbar{
margin-bottom: 0px !important;
}
.navbar ul li a{
font-size: 12px
}
.col-md-6{
padding-left: 5%;
}
.col-md-6{
padding-right: 5%;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>PRINCIPAL</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width">
<!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/todo.css" type="text/css" rel="stylesheet">
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('#');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 3px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 50%;
}
</style>
</head>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<body>
<header id="header">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
MIGUEL ESPESO
</a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">PRINCIPAL</a>
</li>
<li>
<a target"_blank" href="Contacto.html">CONTACTO</a>
</li>
<li>
<a href="#">TUTORIALES</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE MI
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a target="_blank" href="curriculum.html">CURRICULUM</a>
</li>
<li>
<a target="_blank" href="proyectos.html">LOGROS</a>
</li>
<li>
<a href="#">Diseño</a>
</li>
</ul>
</li>
</ul>
<!-- busqueda -->
<!--<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>-->
<form>
<input type="text" name="search" placeholder="Buscar...">
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<!-- AKI EMPIEZA ELCONDUMIO-->
<div class="bgimg-1">
<div class="caption">
<span>CREAMOS LA APLICACION QUE NECESITE PARA SU NEGOCIO</span>
</div>
</div>
<div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
<h2 style="text-align:center;">CURRICULUM</h2>
<h1>BIENVENIDOS A MI SITIO WEB...</h1>
<p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate.
En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que
vaya adquiriendo en el curso. </p>
</div>
<div class="bgimg-2">
<div class="caption">
<span>EMPEZANDO EN DESARROLLO WEB</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
<p>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span>MAS IMAGENES</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
<p>AQUI PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span>¡DIVERTIDO, EH!</span>
</div>
</div>
</body>
</html>