Avisos
Vaciar todo

Hosting WordPress 70% dto Dominios promo

[Resuelto] Problemas con el Menú Principal al integrar un código  

 
Leonardo
 Leonardo
Usuario experto

Buenas tardes, estoy teniendo un problema al momento de integrar un código para el Footer, estoy colocando separadores para cada palabra del menú para que se vea mucho mejor, el problema es que el código también de cambia y desordena el menú principal, aquí les explico:

Captura de pantalla 2

 (imagen 1)

En la imagen 1 podrán ver cómo estaba el footer antes de aplicar el código.

Captura de pantalla 3

(imagen 2)

En la imagen 2 he aplicado el código para añadir los separadores, el código es el siguiente:

 

/*add borders to the menu items*/

.et_pb_menu li:not(:last-child) {
border-right: 1.5px solid #c4c4c9;
position: absolute;
height: 12px
}
/*adjust spacing around menu items*/

.et_pb_menu li a {
padding: 0px 0px;
}

 

Captura de pantalla 1

(imagen 3)

En la imagen 3 se puede ver el Header o Menú Principal muy bien organizado.

 

Captura de pantalla 4

(imagen 4)

En la imagen 4 se puede ver como todo se desordena al aplicar el código.

 

Lo que deseo es que al aplicar el código, se vea el cambio en el footer donde todo se ve muy bien y que no cambie nada del header o menú principal sino que a pesar del cambio, se siga viendo como en la imagen 3.

¿Me podría ayudar a solucionar este problema?

Muchas gracias.

Contenido solo visible a usuarios registrados

Respondido : 21/06/2022 4:53 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Leonardo,

Si deseas que los estilos solo se apliquen al footer solo bastaría que enfoques los estilos a la sección que corresponde, a los estilos aplicados agregarle la clase et_pb_section_0_tb_footer

Por ejemplo

/*add borders to the menu items*/

.et_pb_section_0_tb_footer .et_pb_menu li:not(:last-child) {
border-right: 1.5px solid #c4c4c9;
position: absolute;
height: 12px
}
/*adjust spacing around menu items*/

.et_pb_section_0_tb_footer .et_pb_menu li a {
padding: 0px 0px;
}

También puedes añadirle una clase o ID a la sección que deseas modificar y por medio del CSS los apuntas como en la referencia

Saludos!

Respondido : 21/06/2022 5:03 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Leonardo
 Leonardo
Usuario experto

@bruno-vichetti he colocado el código que me compartiste pero no aparecen los separadores, te adjunto un capture.

Captura de pantalla (19)

 

Respondido : 21/06/2022 5:16 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Leonardo,

Algunas cositas

1-El codigo es tal cual el que tu me has compartido solo agregando la clase que apunta a la section que corresponde al footer
2-El codigo si que se esta ejecutando, tienes que guardar cambios y verlo en el sitio en vivo no te fies de la vista previa del maquetador
3-Voy a ajustar tu codigo ya que la posicion absoluta hace que se vea asi 

image

Seria algo como lo siguiente

.et_pb_section_0_tb_footer .et_pb_menu li:not(:last-child) {
border-right: 1.5px solid #c4c4c9;
position: relative;
height: 12px;
}
image

Saludos!

Respondido : 21/06/2022 5:20 pm

Leonardo
 Leonardo
Usuario experto

Perfecto, ahora si, muchísimas gracias por su tiempo y solución.

Respondido : 21/06/2022 5:40 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Leonardo,

Siempre es un gusto poder ayudarte, cualquier otra consulta estaremos atentos

Saludos!

Respondido : 21/06/2022 6:07 pm

wpdoctor-revisa-la-salud-de-tu-wordpress