Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Problema del menú

Estas en el tema de Problema del menú en el foro de WordPress en Foros del Web. https://ibb.co/25sQNGV Mi problema es que no soy capaz de encontrar en las opciones de WordPress y de la plantilla DIVI, para poder modificar el ancho ...
  #1 (permalink)  
Antiguo 01/03/2021, 14:44
 
Fecha de Ingreso: agosto-2008
Mensajes: 123
Antigüedad: 12 años, 8 meses
Puntos: 0
Pregunta Problema del menú

https://ibb.co/25sQNGV

Mi problema es que no soy capaz de encontrar en las opciones de WordPress y de la plantilla DIVI, para poder modificar el ancho de los desplegables, me limita a la hora de escribir el título del evento, y si pongo más texto se crea un interlineado con el texto en dos párrafos y queda muy feo.

No sé si esto hay que modificarlos en la CSS, porque por más que busco en las opciones de diseño del menú no hay nada o al menos no lo encuentro.

Espero que me podáis ayudar

Por ejemplo me toca poner:

Circuito de R. Tormo
cuando me gustaría poner
Tandas circuito Ricardo Tormo
  #2 (permalink)  
Antiguo 01/03/2021, 14:52
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.111
Antigüedad: 10 años, 1 mes
Puntos: 163
Respuesta: Problema del menú

va a ser en CSS? si, es lo mas seguro... pero viendo una imagen es muy dificil decirte donde y como... agrega la URL del sitio para verlo
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #3 (permalink)  
Antiguo 01/03/2021, 15:07
 
Fecha de Ingreso: agosto-2008
Mensajes: 123
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema del menú

Hola, es que está en construcción www.franciscoroman.com, por eso he subido una captura.

La dejo activa durante 1 h
la web es un clon de la mía www.carlosbartual.com, que voy cambiando los parametros
  #4 (permalink)  
Antiguo 01/03/2021, 18:11
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.111
Antigüedad: 10 años, 1 mes
Puntos: 163
Respuesta: Problema del menú

Código CSS:
Ver original
  1. .nav li ul {
  2.  position:absolute;
  3.  padding:20px 0;
  4.  z-index:9999;
  5.  width:240px; /* aqui */
  6.  background:#fff;
  7.  visibility:hidden;
  8.  opacity:0;
  9.  border-top:3px solid #2ea3f2;
  10.  box-shadow:0 2px 5px rgba(0,0,0,.1);
  11.  -moz-box-shadow:0 2px 5px rgba(0,0,0,.1);
  12.  -webkit-box-shadow:0 2px 5px rgba(0,0,0,.1);
  13.  -webkit-transform:translateZ(0);
  14.  text-align:left
  15. }

esta es la clase que debes modificar en width.. si no quieres entrar a tanto archivo CSS y dependiento el style-X.css(el archivo esta en los css del theme) que tienes activado, trata agregando CUSTOM CSS

Código CSS:
Ver original
  1. .nav li ul {
  2.  width: 400px !important; /*cambialo segun tu */
  3. }
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #5 (permalink)  
Antiguo 04/03/2021, 07:08
 
Fecha de Ingreso: agosto-2008
Mensajes: 123
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema del menú

Hola, gracias por tu respuesta; en DIVI en el apartado de general , existe un apartado que dice; CSS personalizado si el código es el siguiente:
Código:
ul.et_pb_side_nav.et-visible {
display: none !important;
}


word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;


#footer-bottom .container{
width:100% !important;
max-width:100% !important;
}

#footer-info {
float: none !important ;
text-align: center !important;
width: 100% !important;
}



.et_divi_100_custom_back_to_top .et_pb_scroll_top {

background: #000000;
}



@media only screen and ( max-width: 850px ) {
.home .et-pb-controllers {
display : none !important;
}
}


.et_pb_slide_title {
overflow-wrap: normal;
}


a.lightbox.acomment-reply:before {
position: absolute;
top: 0%;
left: 0%;
width:100%;
height: 100%;
padding-top:25%;
text-align:center;
font-size: 32px;
content: "\e050";
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
font-family: "ETmodules" !important;
color: #fff;
content:'I';
opacity:0;
background:rgba(0,0,0,.5);
}

a.lightbox.acomment-reply:hover:before {
opacity:1;
}
a.lightbox.acomment-reply {
display: block;
position:relative;
overflow: hidden;
line-height: 0;
}


.jquery-lightbox-html {
padding: 0;
}

.jquery-lightbox.jquery-lightbox-mode-html {
padding: 0 !important;
}

.jquery-lightbox-background {
height: 100% !important;
top: 0px;
}

.jquery-lightbox-html {
overflow: hidden !important;
border: 8px solid #000 !important;
padding-bottom: 13px !important;
padding-left: -2px !important;
padding-right: -2px !important;
}
.jquery-lightbox-border-bottom-left,
.jquery-lightbox-border-bottom-middle,
.jquery-lightbox-border-bottom-right {
display:none;
}

.jquery-lightbox.jquery-lightbox-mode-html {
min-width: 1080px !important;
min-height: 580px !important;
}
.jquery-lightbox-html .et_pb_text {
width: 100% !important;
}

.jquery-lightbox-background {
width: 100% !important;
}

.jquery-lightbox-html {
height: 100% !Important;
}

.jquery-lightbox-background {
background: transparent !important;
}

.et_pb_row .et_pb_column h2 {
font-size:22px;
}

.textShadowEffect {
text-shadow: 0px 0px 4px rgba(80,80,80,50)
}

.textShadowEffect h2.et_pb_slide_title {
text-shadow: 0px 0px 4px rgba(10,10,10,1);
}
.textShadowEffect .et_pb_slide_content {
text-shadow: 0px 0px 4px rgba(10,10,10,1);
}
.textShadowEffect .et_pb_button {
text-shadow: 0px 0px 4px rgba(10,10,10,1);
}
Pero no tengo muy claro si este aquí donde debo modificar el parámetro que me indicas.
Luego hay otro apartado que se llama:

integración
subdividido en 4 bloques;

Agregar código al <head> de su blog
Solo en este tengo código:
Código:
<script type="text/javascript">
(function($) {
$(document).ready(function() {

$(".lightbox").click(function(){
setTimeout(function(){
$(window).trigger('resize');
console.log('done');
},1000);
});

});
})(jQuery)
</script>
Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics)

Añadir código a la parte superior de las entradas

Añadir código a la parte inferior de sus mensajes, antes de los comentarios

Pero creo que los que me dices, esté en la CSS en la sección de Apariencia; editor del tema:
Pero aquí buscar, es jodio
tengo un menú de la css, en que apartado estaría; .nav li ul ?
  #6 (permalink)  
Antiguo 04/03/2021, 07:09
 
Fecha de Ingreso: agosto-2008
Mensajes: 123
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema del menú

Te he dejado un ejemplo de lo que pasa en mi web, menú; prueba

www.carlosbartual.com

Pone dos enlaces:

prueba de texto más largo de lo normal; aparece interlineado claramente por lo que me indicas width:240px; que debería ser 400px o más.
  #7 (permalink)  
Antiguo 08/03/2021, 11:36
 
Fecha de Ingreso: agosto-2008
Mensajes: 123
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema del menú

Cita:
Iniciado por petit89 Ver Mensaje
Código CSS:
Ver original
  1. .nav li ul {
  2.  position:absolute;
  3.  padding:20px 0;
  4.  z-index:9999;
  5.  width:240px; /* aqui */
  6.  background:#fff;
  7.  visibility:hidden;
  8.  opacity:0;
  9.  border-top:3px solid #2ea3f2;
  10.  box-shadow:0 2px 5px rgba(0,0,0,.1);
  11.  -moz-box-shadow:0 2px 5px rgba(0,0,0,.1);
  12.  -webkit-box-shadow:0 2px 5px rgba(0,0,0,.1);
  13.  -webkit-transform:translateZ(0);
  14.  text-align:left
  15. }

esta es la clase que debes modificar en width.. si no quieres entrar a tanto archivo CSS y dependiento el style-X.css(el archivo esta en los css del theme) que tienes activado, trata agregando CUSTOM CSS

Código CSS:
Ver original
  1. .nav li ul {
  2.  width: 400px !important; /*cambialo segun tu */
  3. }

Hola he probado a ingresar en la css personalizado los atributos:

.nav li ul {
width:400px;
}

Y efectivamente el ancho se hace mayor
pero lo que viene a ser el texto sigue igual por lo que el ancho veo que no va relacionado con la escritura.. Como puedo saber de los atributos que comprende un código .nav li ul cuáles son cada uno para mover y desplazar los textos
  #8 (permalink)  
Antiguo 09/03/2021, 01:22
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.111
Antigüedad: 10 años, 1 mes
Puntos: 163
Respuesta: Problema del menú

Deberia ser esta clase, que se encuentra en el css del stylo 3 como la clase anterior:

Código CSS:
Ver original
  1. #top-menu li li a {
  2.  padding:6px 20px;
  3.  width:200px;
  4. }

Que como agregado personalizado deberia funcionar modificando el ancho:

Código CSS:
Ver original
  1. #top-menu li li a {
  2.  padding:6px 20px;
  3.  width:200px !important; /*ESTE ANCHO*/
  4. }

El tema original maneja 20px menos, es decir si en la clase del ancho del "fondo" del menu tienes 400px, este deberia ser 380px... pero claro que puedes poner 400px en los dos o como lo requieras.
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #9 (permalink)  
Antiguo 10/03/2021, 13:06
 
Fecha de Ingreso: agosto-2008
Mensajes: 123
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Problema del menú

Hola de nuevo veo que vamos avanzando, he usado en la CSS personalizado de divi la combinación de los dos códigos.

Lo puedes ver en la web de carlosbartual.com

Código HTML:
#top-menu li li a {
 width:350px !important;
si coloco también
Código HTML:
.nav li ul {
width:350px !important;
}
El gris se hace igual que el texto, los 3 niveles se hacen en un pequeño escalado, pero se montan entre ellos tapando el texto, y también con ese ligero escalado como peldaños, en vez de hacia abajo es hacia arriba.

Pero ese código ( .nav li ul ) me destroza el menú de mega-menu, fotografía

Como ves no soy un experto, que otros atributos puedo colocar para mover la posición de los niveles para que no se amontonen y que a su vez no me destroce el mega-menu

gracias por tu ayuda



La zona horaria es GMT -6. Ahora son las 02:58.