Cómo arreglar el problema de la lupa del buscador de Divi en la cabecera

Cuando tienes un menú con muchos elementos en la cabecera de tu web hecha con Divi, el icono de la lupa que lanza el buscador se recoloca y queda abajo a la derecha, muy feo.

Hoy vamos a ver cómo corregir este problema, situando el icono de la lupa del buscador en la parte superior del menú, su lugar lógico.

Cómo cambiar de posición el icono de la lupa con código

La manera más rápida y limpia de corregir este problema es añadir este código CSS, desde la administración de tu web, en Apariencia → Personalizar → CSS adicional:

/* Corregir ubicacion icono lupa divi en cabecera */
@media only screen and (min-width: 981px) {
.et_header_style_left #et_top_search {
position: absolute !important;
right: 0px;
}
.et_header_style_left #et-top-navigation {
padding-right: 40px !important;
}
.et_header_style_centered #et_top_search {
position: absolute !important;
right: -20px;
top: 10px;
}
.et_header_style_centered #et-top-navigation {
padding-right: 0px !important;
}
}

Publicas los cambios y arreglado.

Cómo cambiar de posición el icono de la lupa con un plugin

La otra posibilidad es instalar el plugin Divi Booster que, en sus opciones retoques en la cabecera principal tienes la posibilidad de corregir este problema del icono de la lupa.

Simplemente activa la opción «Fix header menu width / magnifying glass issue» y guarda los cambios.

Da igual el método elegido, el resultado es que quedará corregido el problema, y el icono de la lupa del buscador del tema Divi estará en su sitio más lógico.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!