I am trying to create a logo for my website but I only get the result that you will see in the bottom part. I want to put that logo in the navigation bar and that the icon that appears to the left of my name does not appear. Surely I am doing badly the logo, what form there is to do it? . If someone can help me how to put that logo in the navigation bar. Thanks, I do not help much code imagine.
/* 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%;
}
/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/
/*codigo nuevo*/
.buscar {
position: absolute;
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
right: 0px;
transition: all .3s ease;
z-index: 100;
}
.buscar input {
height: 100%;
width: 100%;
padding:10px;
}
.buscar span {
position: absolute;
right: 0px;
padding: 15px;
background: rgb(245, 245, 245);
}
.buscar span img {
width: 18px
}
<!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">
<link href="css/busqueda.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>
<img src="http://i64.tinypic.com/32zsuqf.png" ></a>
<!-- codigo Nuevo -->
<div class="buscar">
<span id="buscar">
<img src="http://svgshare.com/i/42h.svg"> </span>
<input placeholder="Buscar" type="text" name="" value="">
</div>
<!-- codigo Nuevo -->
</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>
<script type="text/javascript">
var activo = false
$("#buscar").click(function () {
if (!activo) {
$(this).parent("div").css({
"width": "100%"
});
$(this).find("img").attr("src", "http://svgshare.com/i/44D.svg")
} else {
$(this).parent("div").css({
"width": "40px"
});
$(this).find("img").attr("src", "http://svgshare.com/i/42h.svg")
}
activo = !activo
})
</script>
</body>
</html>