Cómo Personalizar el Campo de Búsqueda en el Menú de Divi con CSS

Introducción

El módulo de menú en Divi (desde la versión 4.0 en adelante) no ofrece la opción directa de modificar el color del texto dentro del campo de búsqueda. Además, este campo no adopta los valores establecidos en Configuración del Menú → Diseño → Texto del Menú → Color del Texto.

Para cambiar el color del texto dentro del campo de búsqueda, es necesario aplicar un fragmento de código CSS. A continuación, se presentan diversas maneras de personalizar este campo de búsqueda en el menú de Divi.

Personalizaciones CSS del Campo de Búsqueda

Para visualizar los efectos CSS picar en la lupa de cada menú

Dónde Colocar el Código CSS

Para aplicar los estilos CSS que se presentan a continuación, puedes agregarlos en alguna de estas ubicaciones:

  1. Apariencia → Personalizar → CSS Adicional
  2. Divi → Opciones del Tema → CSS Personalizado
  3. Hoja de estilos de tu tema hijo (style.css)
  4. En la configuración de la página (en «CSS Personalizado»)

 

También lo puedes añadir dentro del módulo  de menú como es el caso de los ejemplos que te muestro aquí abajo.

Si lo hubiera realizado desde Apariencia → Personalizar → CSS Adicional no podría haber creado estos 9 ejemplos.
  1. Cambiar el Color del Texto de Entrada de Búsqueda
.et_pb_menu__search input::placeholder,
.et_pb_fullwidth_menu .et_pb_menu__search-input,
.et_pb_menu .et_pb_menu__search-input {
    color: #fff; /* Blanco */
}
Contáctanos
  1. Agregar Espaciado Izquierdo para Separarlo del Logotipo

Si el campo de búsqueda está demasiado cerca del logotipo, podemos agregar un margen a la izquierda:

.et_pb_menu__search {
    margin-left: 40px; /* Separa el campo del logo */
}
Contáctanos
  1. Agregar Espaciado Interno (Padding)

Para mejorar la apariencia del campo de búsqueda:

.et_pb_menu__search-input {
    padding: 10px 15px; /* Espaciado interno superior/inferior y lateral */
}
Contáctanos
  1. Cambiar el Color de Fondo del Campo de Búsqueda
.et_pb_menu__search-input {
    background-color: #333; /* Fondo gris oscuro */
    color: white; /* Texto en blanco */
}
Contáctanos
  1. Agregar un Borde Redondeado al Campo
.et_pb_menu__search-input {
    border-radius: 8px; /* Bordes redondeados */
}
Contáctanos
  1. Agregar un Borde Personalizado
.et_pb_menu__search-input {
    border: 2px solid #ff5722; /* Borde naranja */
}
Contáctanos
  1. Cambiar el Estilo del Placeholder (Texto «Buscar…»)

Si queremos que el placeholder tenga un estilo diferente al del texto normal:

.et_pb_menu__search-input::placeholder {
    font-style: italic;
    font-weight: bold;
    color: lightgray;
}
Contáctanos
  1. Añadir un Efecto de Sombra
.et_pb_menu__search-input {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
Contáctanos
  1. Aumentar el Tamaño del Campo de Búsqueda
.et_pb_menu__search-input {
    width: 300px; /* Cambia el ancho del campo */
}
Contáctanos

Conclusión

Divi ofrece una gran flexibilidad para personalizar el menú de navegación, pero algunas opciones, como el color del texto del campo de búsqueda, requieren ajustes manuales con CSS. Con los fragmentos de código anteriores, puedes modificar la apariencia del campo de búsqueda para adaptarlo al diseño de tu sitio web.