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.
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.
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.
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.
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.
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:
Ver comentarios (20)
Gracias miles, sin este post, no lo hubiera logrado. Prácticamente el mismo código funcionó para ENFOLD THEME
Que bueno que te sirvió, Saludos :)
¡Muchísimas gracias! Súper claro y sin problemas :')
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.
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.
hola, no consigo centrar mi logotipo. Lo siento, donde debo poner el codigo?
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/
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?
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.
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
Hola, hay varios plugins para eso, puedes revisar: https://decodecms.com/insertar-codigo-fuente-en-wordpress-usando-prism/
Buenos dias,
A donde pongo el codigo para centrar mi logo
Gracias
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.
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!
Gracias Gerson. Saludos!
Tengo un problema con wordpress como puedo poner una imagen de logo en el centro del menu.
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.
El problema es que no puedo no se donde colocarlo y donde tocarlo , para hacerlo.
Necesito ayuda porfavor.
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.