[Resuelto] eliminar espacio en menú  

Que tal Jordi,

Al parecer el problema viene directamente de como has estructurado la maqueta del menu

Una solución simple seria aplicar un margen negativo a todo el contenedor del menu para disminuir el espacio que deseas retirar, por ejemplo

.et-l--header{
margin-bottom: -30px;
}

Este margen puedes agregarlo tambien desde el constructor visual, sin embargo te podría sugerir validar la estructura del menu como tal ya que el logo no tiene un ancho definido lo que significa que solo tomara una proporción basándonos en el espacio que tenga su contenedor 

Echale un vistazo, Saludos!

@bruno-vichetti

Hola

Donde tengo que poner el código que me has enviado para que afecte a todas las páginas de mi web?

Si me lo puedes indicar paso a paso mejor, muchas gracias.

Hola Jordi.

Todos los códigos CSS los puedes añadir en Apariencia -> Personalizar -> CSS Adicional.

Debajo del último código añade el que te indico mi compañero:

Un saludo

Hola

Siento insistir..., quizás no os escribo en un mes, o cada dia...agradezco vuestra paciencia.

pero he puesto el código que me has dicho y tengo el espacio de mas igual.

Que puedo hacer?

muchas gracias

Hola Jordi, 

Verifica si añadiendo el siguiente código se soluciona

@media only screen and (max-width: 600px) {
.et-l--header{
margin-bottom: -30px !important;
}
}

De manera general ten en cuenta lo que te comente anteriormente en otro hilo de foro, → https://www.webempresa.com/foro/soporte-divi-en-espanol/separacion-menu  

Debes comprobar como tienes añadida la opción de tu cabecera y utilizar el módulo de menú de Divi si quieres que en móvil no se muestre ningún espacio en ella 

Revisa y nos comentas como va todo

Un Saludo

@pepesoler

Hola

Al ver que no podemos solucionar el espacio extra del menú de divi, voy a optar por instalar un plugin para ampliar las posibilidades del menú.

Que plugin me recomiendas?, de pago, gratuito?, Si es un buen plugin que me puede servir para todas las webs que vaya creando estoy dispuesto a pagar por el plugin,

muchas gracias.

Hola Jordi

El tema del espacio es porque movimos el menu y queda el espacio reservado para el menu.

Se podría reducir el espacio pero hay un problema que se sobre pondría con el logo y lo ocultaría.

Vamos a ver si podemos solucionarlo reduciendo el ancho de esa columna.

.- Accede apariencia -> Personalizar -> CSS Adicional y elimina este código:

.et_pb_module .mobile_menu_bar:before {
top: -40px!important;
}

.- Añade estos códigos:

@media (max-width: 780px){
.et_pb_column {
margin-bottom: -12px;
}
.et_pb_module.et_pb_menu.et_pb_menu_0_tb_header.et_pb_bg_layout_light.et_pb_text_align_left.et_dropdown_animation_fade.et_pb_menu--without-logo.et_pb_menu--style-left_aligned {
width: min-content;
}
.et_pb_module .mobile_menu_bar:before {
top: 1px!important;
margin-left: 8em!important;
}
.mobile_menu_bar {
width: 5px;
}
.et_pb_column.et_pb_column_1_2.et_pb_column_5.et_pb_css_mix_blend_mode_passthrough.et_had_animation {
margin-bottom: 5em;
}
}

Guarda los cambios y lo revisas.

Un saludo

@pepesoler

Hola Pepe, he borrado he insertado el código que me has indicado y se a quedado el mismo espacio y encima me a vuelto a bajar el menu hamburguesa.

He estado consultando a chatgpt y me ha recomendado usar un plugin gratuito llamado "Divi Menu Styles", voy a intentarlo y ya te comentaré, 

Agradezco tu ayuda...

Hola Jordi.

Pues veo que el código funciona bien:

me ha recomendado usar un plugin gratuito llamado "Divi Menu Styles"

Ok, perfecto ya nos comentas como te fue.

Un Saludo

@pepesoler

Hola

Ya no se que hacer, he probado plugins y de todo y no logro poner el menú con menos separación debajo.

He estado mirando las plantillas de divi y se ve el menú correctamente, eso quiere decir que poder, se puede poner, 

Tiene que haber alguna manera de poner el menú que yo quiero, no se como...aunque tenga que volver a diseñar el menú de cero,

Quiero hacer muchas mas webs y quiero poder poner el menú que quede bien, a ver si puedes ayudarme por favor, ya hemos probado con el código y tampoco funciona...yo ya no se que hacer mas, pero lo quiero conseguir, es muy importante para mi, muchas gracias.

Hola Jordi, 

En este caso no puedes solucionarlo con CSS, esto es porque dentro de tu módulo tienes añadida separación y espacios que hacen mover el menú en móvil y generan este espacio, lo que ocasiona que si lo muevas de alguna forma o lo fuerces con CSS no se muestre bien. 

Dentro de Divi la solución es que crees una cabecera tipo como la que te indique solo para tu vista móvil, o bien que elimines estas separaciones en tu cabecera actual dentro de Divi que tienes creada en tu sitio web, revisa esto que te comento y verifica los espacios de tu menú. 

Respondido por: @karen

Debes comprobar como tienes añadida la opción de tu cabecera y utilizar el módulo de menú de Divi si quieres que en móvil no se muestre ningún espacio en ella 

Como te comento una opción es: Crear una nueva cabecera para tu versión móvil y desactiva la visibilidad para tablet y escritorio, luego desactiva la visibilidad del escritorio para móvil y pruebas si con ello logras configurar lo que necesitas.

Puedes ver un ejemplo en este enlace → Contenido solo visible a usuarios registrados

Un Saludo

@karen

LO HE CONSEGUIDO !!!!!!!!

Gracias karen, era justo como me has indicado, simplemente tenia que insertar los elementos en la barra del medio.

Gracias a todos por vuestra paciencia, un abrazo muy grande.

Hola Jordi.

Genial !!! Me alegra que lo solucionaras.

Cualquier consulta que tengas no dudes en comunicarlo.

Un Saludo