fbpixel

Menú con imágenes y espacio

Hola, buen día.
Tengo una web con el siguiente menú con íconos:

El problema que no puedo “quitar” ese espacio en blanco que queda entre ícono e ícono y comienza a enviarlos a un segundo renglón y no es lo deseado.

En el menú de WordPress lo trato con: Elemento personalizado con Clase CSS mega-link

¿Debo agregar algún atributo para la imagen agregada por html?

No uso ningún plugin para el menú, y tampoco deseo usar, ya que se que con código se puede realizar, solo que no estoy dandome cuenta que me falta.

Desde ya muchas gracias por la ayuda

Buen día Melina
Ese sitio está realizado en WordPress?
Entiendo que el dominio es www.lvservicios.com.ar y el inspector me indica que no es WordPress sino un sitio en PHP/Bootstrap etc…

Será bueno que nos indiques el link para poder dar una respuesta más acertada.

Muchas gracias
Saludos
Leonardo Grabow

1 me gusta

Hola Leonardo, gracias por tu ayuda.
No, estoy trabajando una URL temporal para luego migrar la web a la URL final.
En la que estoy trabajando, está en WordPress
La URL temporal es: http://lvservicios.aparecer-en-google.com.ar/

¡Gracias!

Hola Melina. Acabo de ver tu sitio y la razón por la que ves esos espacios es porque el megamenú está dividido en 4 columnas. Eso lo deduzco por este código:

#top-menu li.mega-menu > ul > li {
    width: 25%;
    margin: 0;
}

Primero pensé que con cambiar el valor de ese porcentaje, sería suficiente, pero no es así. También hay que modificar estos códigos:

#top-menu li.mega-menu > ul > li:nth-of-type(4n+1) {
    clear: left;
}

y

#top-menu li.mega-menu > ul > li:nth-of-type(4n) {
    clear: right;
}

Supongo que el megamenú que estás usando te debe permitir seleccionar la cantidad de columnas que querés usar, pero si no, lo puedes modificar por CSS. Suponiendo que necesites 6 columnas (veo que al menos ahora son 6 productos), deberías usar este código:

#top-menu li.mega-menu > ul > li:nth-of-type(4n+1) {
    clear: initial;
}
#top-menu li.mega-menu > ul > li:nth-of-type(4n) {
    clear: initial;
}
#top-menu li.mega-menu > ul > li {
    width: calc(100% / 6);
}
#top-menu li.mega-menu > ul > li:nth-of-type(6n+1) {
    clear: left;
}
#top-menu li.mega-menu > ul > li:nth-of-type(6n) {
    clear: right;
}

Los primeros 2 códigos son para cancelar lo que dice el megamenú. Y los siguientes 3 son para modificarlo a la cantidad de columnas que quieras. Si en lugar de 6, son X columnas, simplemente cambia el 6 en (100% / 6), en (6n+1) y en (6n+1) por el valor que desees.

El código CSS que te pasé va en algún lugar donde puedas poner código CSS. Si no usas un tema hijo, lo mejor es ir al Personalizador de WordPress y buscar una opción que te permita agregar más código CSS (muchas veces se llama CSS adicional o CSS personalizado).

Saludos, Gabriel

2 Me gusta


Así debería verse con los cambios

1 me gusta

Hola Gabriel, muchas gracias por tu ayuda, no tenés idea… ¡lo que di vueltas con este menú!

¡Gracias!

1 me gusta

De nada, siempre es un gusto ayudar. Si hay algo que me encanta (y en lo que me he especializado bastante) del diseño web es realizar ajustes de diseño con CSS.

Espero que con eso se haya solucionado el problema, de lo contrario, avisá para que podamos ver qué puede estar pasando.

¡Éxitos en tu web!

2 Me gusta

¡Se solucionó perfectamente! Muchas gracias, muy agradecida :grin::star_struck:

1 me gusta