3

Estoy tratando de centrar verticalmente el logo de la parte izquierda de la barra de navegación y aumentar el tamaño de la fuente sin éxito. Lo que quiero es que se centre igual de arriba que de abajo en la barra de navegación, y a su vez aumentar el tamaño de las letras. Tenía un logo por defecto de bootstrap que he comentado en el código, el cual si estaba centrado. No encuentro forma de conseguirlo, pues quiero aumentarle un poco de tamaño, pero cuanto más aumento, se sale de la barra por la parte de abajo. Les muestro lo que conseguí. Gracias.

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 &copy;2017</a>
            </div>
        </div>
    </footer>

</body>
</html>

8
  • 1
    No entiendo. Tienes la imagen dentro del navbar lo que implica que tendrías que centrar el navbar completo pero en la forma en que tienes el código el input de busqueda en conjunto con el button quedará descuadrado si centras el navbar. Necesitas tener el icono en el navbar? de ser así entonces porque no tienes todos los elementos englobados por el navbar incluyendo el input y el button que te mencioné?
    – Eztronics
    Commented el 19 ene. 2018 a las 22:16
  • Gracias por tu interés @Huskie , pero no se como hacerlo. Si quería que estuviera en la barra de navegación. El otro que venía de bootstrap si que quedaba centrado, está en el código comentado, pero no se como ponerle igual. Commented el 19 ene. 2018 a las 22:22
  • En principio no, pues ya hay indicaciones en text-area Commented el 19 ene. 2018 a las 23:17
  • Estoy preparando otra preguntita con un buscador que tengo en footer, pero he de solucionar esto Commented el 19 ene. 2018 a las 23:18
  • 1
    Prueba con bootstrap4 tiene esta opcion ya habilitada, tiene hasta temas de los que puedes partir getbootstrap.com/docs/4.0/getting-started/introduction Commented el 19 ene. 2018 a las 23:20

1 respuesta 1

1

Tienes algunos navbar "anidados", la imágen no queda bien colocada porque no estas manejando su tamaño en "%" para que pueda adaptarse al elemento padre sino que estas usando "px" y estas "rompiendo" con el comportamiento natural del navbar.

La media query que tienes para la imagen de google no esta bien implementada y es por eso que se desborda el tamaño completamente y como dije antes al tener una especie de navbars anidados esto no permite colocar el "search" que deseas centrado.

Estos son los cambios:

#logo{
        height: 39px;
}

La línea anterior debe ir en "%" para que sea responsive (cuando cambie la resolución la imagen se adapte automáticamente). Así:

#logo{
  height: 100%;
}

La media query de la imágen de google:

@media (max-width: 620px){
        a[href*="google.com"]{display: none}
        form{ padding-top: 1.2em; }
       }    

La he eliminado, redunda debido a que tu text-box ya dice que es busqueda de google y además es una de las causas por las cuales ni puedes centrar el div al igual que el logo que quieres posicionar también se ve afectado.

En esta parte de tu código es que tienes los "navbar anidados":

 <!--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>

He modificado el código:

<div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group" style="height:100%">
            <input type="text" class="form-control" placeholder="Busqueda de Google" name="srch-term" id="srch-term" style="height:100%">
            <div class="input-group-btn" style="height:100%">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

Para cambiar el tamaño de la letra dentro del navbar creas un estilo que seleccione a los elementos li del navbar por ejemplo:

.nav>li{
font-size:140%;
}

El snippet completo con todo corregido ha quedado así:

.nav>li{
    font-size:140%; /* coloca 250% si quieres ver el cambio facilmente */
}

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;
	}
       
  /*   estilos del logo   */
   #logo{
		height: 100%;
}
<!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>
    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
	
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
		<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="#">
        <img id="logo" src="http://i65.tinypic.com/1zq615f.png">
      </a>
	</div>
	
<div class="collapse navbar-collapse navbar-ex1-collapse">
		
		 <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 class="col-sm-3 col-md-3 pull-right">
		<form class="navbar-form" role="search">
		<div class="input-group" style="height:100%">
			<input type="text" class="form-control" placeholder="Busqueda de Google" name="srch-term" id="srch-term" style="height:100%">
			<div class="input-group-btn" style="height:100%">
				<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
			</div>
		</div>
		</form>
		</div>
		
	</div>
  
</div>

    <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 &copy;2017</a>
            </div>
        </div>
    </footer>

</body>
</html>

5
  • Perfecto @Huskie , ¿como haria para aumentar el tamaño de las letras de la barra de navegación ? Commented el 20 ene. 2018 a las 0:32
  • Las del navbar, para que ocupen algo más. Estoy buscando una pregunta que hablaba de ello pero no la encuentro.... Commented el 20 ene. 2018 a las 0:41
  • Pues si que has sido de gran ayuda, un saludo Commented el 20 ene. 2018 a las 1:10
  • 1
    Me alegra poder haberte ayudado. Como consejo te digo que puedes sobreescribir siempre las propiedades que coloca por defecto bootstrap. Solo trata de hacerlo en una hoja de estilos aparte para que el fuente de bootstrap no se vea modificado ya que no es una buena práctica. Un saludo!
    – Eztronics
    Commented el 20 ene. 2018 a las 1:14
  • Gracias, me queda mucho que aprender, y gracias a ustedes se hace más sencillo. Hasta la prosima. Commented el 20 ene. 2018 a las 1:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.