• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Centrar Logo en Menú Principal

Centrar Logo en Menú Principal

Centrar Logo en Menú WordPress

[ 18 noviembre 2016 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

A pesar de que depende de la estructura HTML y las clases CSS que tiene el theme usado, hay lineamientos base que podemos seguir para centrar el logo en el menú principal de un sitio en WordPress.

 

1- Logo sobre el menú principal

Esto es lo primero que tenemos que buscar, que tanto el contenedor del logo como el menú principal ocupen todo el ancho de la pantalla tal como se muestra en la siguiente imagen los contenedores de color verde.

Logo y Menú al 100% ancho

 
En base a la imagen anterior el código CSS aplicado sería:


.contenedor-logo, .menu-principal{
	width:100%;
}

 

2- Logo y menú principal centrado

Luego que tenemos el logo y el menú al 100% del ancho, entonces tenemos que centrar ambos elementos.

Logo y Menú centrado

 
Para centrar estos elementos podemos usar un código similar a:


.contenedor-logo, .menu-principal{
	margin:auto;
	text-align:center;
}

 
Si el menú no se centra con las sentencias anteriores, es por que posiblemente los elementos li sean float, tenemos que quitar el float y hacer que se muestren en bloque en línea:


.menu-principal li{
	float: none;
	display: inline-block;
}

 

3- Dando espacio para el logo

En este punto debemos ubicar el ID o clase del ítem de menú que hará un espacio para colocar el logo, usualmente se usa un margin o un padding.

Item de menú con Padding derecho

 

Suponiendo que el ID del ítem es menu-item-123, daremos un ancho de 260px (depende del ancho del logo), nuestro código sería:


.menu-principal #menu-item-123{
	padding-right: 260px;
}

 

4- Reposicionar el logo

En este punto necesitaremos mover el logo hacia el espacio dado por el ítem de menú, esto se consigue con la propiedad CSS position.

Posicionar logo en menú

 

El logo usualmente estará dentro de una etiqueta de link, supondremos que necesitamos desplazarlo 100px, nuestro código sería algo similar a:


.contenedor-logo a{
	position: relative;
	top:100px;
}

 

5- Cambiar altura del contenedor superior

Es posible que tras mover el logo aún quede la misma altura en el contenedor superior, por lo que deberíamos reducirla.

Reducir alto contenedor superior

 

Podemos cambiar la altura con un código similar a:


.contenedor-logo{
	height: 4px;
}

 

6- Problemas con los links

Es posible que la capa del logo se superponga al menú y no se pueda acceder a los ítems, o también es posible que no se pueda acceder al link del logo, para estos casos necesitaremos reposicionar las capas con z-index, por ejemplo si queremos reposicionar el link del logo usaríamos un código similar a:


.contenedor-logo a{
	z-index: 9999;
}

 

7- Usando Media Queries

Todo este código CSS que hemos venido creando debería estar dentro de un media query ya que sólo debe tener efecto para pantallas con un ancho en donde se muestre el menú completo de manera horizontal, es por eso que, suponiendo que nuestro menú se vuelve responsive a los 980px, agruparíamos nuestro código anterior como:


@media (min-width: 980px){
	.contenedor-logo, .menu-principal{
		width:100%;
		margin:auto;
		text-align:center;
	}

	.contenedor-logo{
		height: 4px;
	}

	.contenedor-logo a{
		position: relative;
		top:100px;
	}

	.menu-principal li{
		float: none;
		display: inline-block;
	}

	.menu-principal #menu-item-123{
		padding-right: 260px;
	}
}

 

8- Tener en cuenta

  • Los estilos anteriores sólo sirven de guía, no pueden ser aplicados directamente sin tener en cuenta la estructura HTML y los estilos CSS que ya esta usando nuestro theme.
  • Para las modificaciones del theme puedes usar Firebug.

 

9- Ejemplos con themes reales

 
Para el theme de ejemplo Genesis:

Para el theme Responsivo:

 
¿Aún con dudas?, en el siguiente video se explica en detalle cómo centrar el logo en el menú principal del theme genesis de ejemplo.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 3,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Irma

    4 diciembre, 2017

    Gracias miles, sin este post, no lo hubiera logrado. Prácticamente el mismo código funcionó para ENFOLD THEME

    • Jhon Marreros Guzmán

      4 diciembre, 2017

      Que bueno que te sirvió, Saludos 🙂

  2. Montse

    30 enero, 2018

    ¡Muchísimas gracias! Súper claro y sin problemas :’)

  3. Joel

    18 febrero, 2018

    Buen tutorial amigo, una consulta ¿Cómo puedo habilitar las opciones para que se pueda editar el logo desde el panel wordpress en versión mobile y desktop.

    • Jhon Marreros Guzmán

      18 febrero, 2018

      Hola, supongo que te refieres a la opción de: Apariencia > Personalizar, esto depende de la funcionalidad de tu theme, espero hacer un artículo próximamente sobre esto.

  4. Miquel

    1 julio, 2018

    hola, no consigo centrar mi logotipo. Lo siento, donde debo poner el codigo?

    • Jhon Marreros Guzmán

      2 julio, 2018

      Hola, revisa el siguiente artículo que explica cómo agregar código CSS a tu WordPress: https://decodecms.com/agregar-css-en-wordpress-de-manera-correcta/

      • Miquel

        3 julio, 2018

        Hola Jhon, gracias por contestar. He seguido todas las instrucciones y nada. El logotipo no se mueve… parece ser que el código no me funciona por el tema o algo?

        • Jhon Marreros Guzmán

          3 julio, 2018

          Hola, ten en cuenta que el código lo debes adecuar tu theme ya que no funcionará en todos los casos, además algunos themes te lo pondrán más difícil que otros. Si deseas puedes contactarme a través del formulario de contacto para ver más detalles de tu problema.

  5. Ridel

    4 julio, 2018

    hola yo tengo una duda que no tiene que ver con el logo, y es como haces para que en tu página a la hora de escribir código se vea como en un editor de texto, no se si me explico bien

    • Jhon Marreros Guzmán

      5 julio, 2018

      Hola, hay varios plugins para eso, puedes revisar: https://decodecms.com/insertar-codigo-fuente-en-wordpress-usando-prism/

  6. Alberto Gustavo

    2 febrero, 2020

    Buenos dias,
    A donde pongo el codigo para centrar mi logo
    Gracias

    • Jhon Marreros Guzmán

      2 febrero, 2020

      Hola, es código CSS, puedes usar el style.css de tu child-theme, o usar en el Personalizador del theme la opción de CSS.

  7. Gerson

    19 marzo, 2020

    Hola Jhon! realmente te quiero dar las gracias por tus tutoriales directos y sencillos, este ha sido de magnífica ayuda y no es la primera vez que son de utilidad. Gracias mil!

    • Jhon Marreros Guzmán

      20 marzo, 2020

      Gracias Gerson. Saludos!

  8. Anonimo

    23 febrero, 2021

    Tengo un problema con wordpress como puedo poner una imagen de logo en el centro del menu.

    • Jhon Marreros Guzmán

      23 febrero, 2021

      Hola, este artículo es justo para eso, sin embargo puede depender del theme que usas ya que podría tener otras clases CSS y necesitas adaptarlas.

  9. Anonimo

    23 febrero, 2021

    El problema es que no puedo no se donde colocarlo y donde tocarlo , para hacerlo.

    Necesito ayuda porfavor.

  10. Anonimo

    23 febrero, 2021

    El problema es que el el archivo header.php no se como hacerlo esto.

    Y el segundo problema que tengo es como cambio el CopyRight del arcvhivo footer y modifico el contenido del archivo.

  11. Anonimo

    23 febrero, 2021

    Sigo con este problema es que nunca he tocado wordpress y no se como modificarlo,
    Para poder poner la imagen del logo en el centro.

    AYUDA PORFAVOR .

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Guardar datos de formulario de contacto sin plugins

Añadir código de Google Tag Manager sin plugins en WordPress

¿Qué es el Loop de WordPress?

Consultar dudas de produtos por Whatsapp en WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados