Problema del menú

[calbart]

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

[petit89]

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

[calbart]

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

[petit89]

Código CSS:

.nav li ul {
 position:absolute;
 padding:20px 0;
 z-index:9999;
 width:240px; /* aqui */
 background:#fff;
 visibility:hidden;
 opacity:0;
 border-top:3px solid #2ea3f2;
 box-shadow:0 2px 5px rgba(0,0,0,.1);
 -moz-box-shadow:0 2px 5px rgba(0,0,0,.1);
 -webkit-box-shadow:0 2px 5px rgba(0,0,0,.1);
 -webkit-transform:translateZ(0);
 text-align:left
}
 

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:

.nav li ul {
 width: 400px !important; /*cambialo segun tu */
}
 

[calbart]

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 ?

[calbart]

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.

[calbart]

Iniciado por petit89

Código CSS:

.nav li ul {
 position:absolute;
 padding:20px 0;
 z-index:9999;
 width:240px; /* aqui */
 background:#fff;
 visibility:hidden;
 opacity:0;
 border-top:3px solid #2ea3f2;
 box-shadow:0 2px 5px rgba(0,0,0,.1);
 -moz-box-shadow:0 2px 5px rgba(0,0,0,.1);
 -webkit-box-shadow:0 2px 5px rgba(0,0,0,.1);
 -webkit-transform:translateZ(0);
 text-align:left
}
 

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:

.nav li ul {
 width: 400px !important; /*cambialo segun tu */
}
 

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

[petit89]

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

Código CSS:

#top-menu li li a {
 padding:6px 20px;
 width:200px;
}
 

Que como agregado personalizado deberia funcionar modificando el ancho:

Código CSS:

#top-menu li li a {
 padding:6px 20px;
 width:200px !important; /*ESTE ANCHO*/
}
 

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.

[calbart]

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