I am trying to create a logo for my website but I only get the result that you will see in the part below. I want to put that logo in the navigation bar and not have the icon to the left of my name appear. I'm sure I'm doing the logo wrong, what is the way to do it? . If someone can help me how to put that logo in the navigation bar. Thanks, code doesn't help me much I 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>
Simply add a height to your image and delete the flame you currently have.
In the CSS:
Your modified example: