I am trying to vertically center the logo on the left side of the navbar and increase the font size to no avail. What I want is for it to be centered at the top and bottom of the navigation bar, and at the same time increase the size of the letters. I had a default bootstrap logo that I commented out in the code, which was centered. I can't find a way to achieve it, because I want to increase it a little in size, but the more I increase it, it comes out of the bar at the bottom. I show you what I got. Thanks.
body {
padding-top: 50px;
color: #959595;
}
h1, h2, h3, h4, h5, h6 {
color: black;
}
.feature {
background-color: yellowgreen;
color: greenyellow;
}
.article-intro {
margin-bottom: 25px;
}
.footer-blurb {
padding: 30px 0;
background-color: goldenrod;
color: black;
}
.footer-blurb-item {
padding: 30px;
}
.small-print {
background-color: #000000;
padding: 40px 0;
}
.feature,
.page-intro,
.article-intro,
.footer-blurb,
.small-print {
text-align: center;
}
@media (max-width: 620px){
a[href*="google.com"]{display: none}
form{ padding-top: 1.2em; }
}
/* estilos del logo */
#logo{
height: 39px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/logo.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/logo.ico" type="image/x-icon" />
<title>Principal</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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="#">
<!--<span class="glyphicon glyphicon-fire"></span>LOGO-->
<img id="logo" src="http://i65.tinypic.com/1zq615f.png" >
</a>
</div>
<!--buscador de google-->
<form class="pull-right" method=GET action="http://www.google.com/search">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle" style="background: white; ">
</a>
<input type=text name=q maxlength=255 placeholder="Busqueda Google">
<input Type=hidden name=hl value="es">
<input type=submit name=btnG VALUE="Buscar...">
</form>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Casa</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Servicios
<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a href="#">Desbroces</a></li>
<li> <a href="#">Vallados</a> </li> <li> <a href="#">Podas y talas</a></li>
</ul>
</li>
<li>
<a target="_blank" href="#">Contacto</a>
</li>
<li> <a target="_blank" href="#">Ubicacion</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron feature">
<div class="container">
<h1>Desbroces y limpieza de fincas:</h1><p>Lleva.</p>
<h3 style="text-align:center;">Trabajamos</h3>
</div>
</div>
<!-- Content -->
<div class="container">
<div class="row page-intro">
<div class="col-lg-12">
<h1>Nuestros clientes siempre satisfechos. </h1>
</div>
</div>
<div class="row">
<article class="col-md-4 article-intro">
<a href="#">
<img class="img-responsive img-rounded" src="images/desbroce_img/d" alt="Desbroces"> </a>
<h3> <a href="#">Desbroces</a> </h3>
</article>
<article class="col-md-4 article-intro">
<a href="#">
<img class="img-responsive img-rounded" src="#" alt="Vallados">
</a>
<h3><a href="galeri_vallas.html">Vallados</a> </h3>
</article>
<article class="col-md-4 article-intro">
<a href="#">
<img class="img-responsive img-rounded" src="#" alt="Trabajos"></a>
<h3> <a href="#">Trabajos</a> </h3>
</article>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-4 footer-blurb-item">
<img class="img-circle" src="#" alt="" width="200" height="200">
<h3>Toda clase de podas</h3><p>Profesionales </p>
<p><a class="btn btn-default" href="#">Una muestra</a></p> </div>
<div class="col-sm-4 footer-blurb-item">
<img class="img-circle" src="#" alt="" width="200" height="200">
<h3>Caminos de piedra</h3> <p>Arreglamos...</p>
<p><a class="btn btn-default" href="#">Juzgue usted</a></p> </div>
<div class="col-sm-4 footer-blurb-item">
<img class="img-circle" src="#" alt="" width="200" height="200">
<h3>Muros de piedra</h3><p>Expertos</p>
<p><a class="btn btn-default" href="#">Una muestra...</a></p>
</div>
</div>
</div>
</div>
<section class="social">
<section>
<ul id="services">
</ul>
</section>
</section>
<div class="small-print">
<div class="container">
<a target="_blank" href="#">Copyright ©2017</a>
</div>
</div>
</footer>
</body>
</html>
You have some "nested" navbars , the image is not well placed because you are not managing its size in "%" so that it can adapt to the parent element but you are using "px" and you are "breaking" with the natural behavior of the navbar.
The media query that you have for the google image is not well implemented and that is why the size completely overflows and as I said before, having a kind of nested navbars does not allow you to place the "search" that you want centered.
These are the changes:
The previous line must go in "%" to be responsive (when the resolution changes, the image adapts automatically). So:
The media query of the google image:
I have eliminated it, it is due to the fact that your text-box already says that it is a google search and it is also one of the reasons why you cannot center the div as well as the logo that you want to position is also affected.
It is in this part of your code that you have the "nested navbar":
I have modified the code:
To change the font size inside the navbar you create a style that selects the li elements of the navbar for example:
The complete snippet with everything corrected has been as follows: