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!
Hola Fernando!!
Sabrías decirme cómo poner la lupa en la versión para el móvil? O lupa o algún buscador.
Millones de gracias.