Centrar Logo en Menú Principal

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

css

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:

 
¿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.