Problema con reescalado de elementos en header web

Hola, estoy haciendo con Elementor una barra header con el logo de la web, un buscador y su menú, con medidas en porcentajes; hasta allí todo bien.
El problema es que cuando la ventana del navegador deja de estar maximizada y se coloca en modo ventana (sin llegar al breakpoint) o se hace zoom del navegador (y deduzco que pasará también si se aumenta la resolución de pantalla), todos los elementos del header se reescalan a la vez y se descolocan:




He visto que las webs profesionales hacen que los componentes se mantengan estáticos (sean iconos o letras) y solo la barra del buscador recibe el "estiramiento" o la "contracción", lo cuál sería lo ideal:






¿Cómo debería hacerlo?

Para lograr que los elementos del header se mantengan estáticos en su posición mientras la barra de búsqueda se estira o contrae, puedes utilizar técnicas de diseño responsivo como flexbox o grid. De esta manera, podrás definir que ciertos elementos se mantengan estáticos en el tamaño de la pantalla, mientras que otros elementos se adapten a los cambios en el tamaño de la pantalla.

Te recomiendo que definas un contenedor para todos los elementos del header y, dentro de este contenedor, utilices flexbox o grid para posicionar los elementos. De esta forma, podrás establecer que ciertos elementos se mantengan estáticos mientras que otros se adapten a las variaciones en el tamaño de la pantalla.

También te sugiero que definas las medidas de los elementos en unidades relativas como em o rem en lugar de porcentajes, ya que las unidades relativas son más fáciles de manejar en diseños responsivos.

Espero que esto te sirva de ayuda y puedas lograr el diseño que necesitas para tu header.

como te menciona el bot, vas a necesitar meter mano del flexbox. No recuerdo la estructura del header que te da elementor o que tanta flexibilidad tiene como para modificar los valores css del flexbox, así que muy probablemente vas a necesitar escribir tu propio CSS, en este caso creo que te va a servir en particular las reglas "flex-grow" y "flex-basis" pero como usarlas ya dependerá del maquetado que te genera Elementor.

Eso sucede porque estas usando medidas en porcentajes y el porcentaje es relativo al tamaño del contenedor, si el contenedor fluye con el ancho de la ventana, entonces esos porcentajes también van a fluir con la ventana.
Deberías usar flexbox y aplicarle un flex-shrink: 0 a todos los elementos menos a la barra de búsqueda. si pusieras el link podríamos darte una solución mas precisa.

JuaniG42 dijo:

Eso sucede porque estas usando medidas en porcentajes y el porcentaje es relativo al tamaño del contenedor, si el contenedor fluye con el ancho de la ventana, entonces esos porcentajes también van a fluir con la ventana.
Deberías usar flexbox y aplicarle un flex-shrink: 0 a todos los elementos menos a la barra de búsqueda. si pusieras el link podríamos darte una solución mas precisa.

Hacer clic para expandir...

Tglex dijo:

como te menciona el bot, vas a necesitar meter mano del flexbox. No recuerdo la estructura del header que te da elementor o que tanta flexibilidad tiene como para modificar los valores css del flexbox, así que muy probablemente vas a necesitar escribir tu propio CSS, en este caso creo que te va a servir en particular las reglas "flex-grow" y "flex-basis" pero como usarlas ya dependerá del maquetado que te genera Elementor.

Hacer clic para expandir...

Gracias, lo he conseguido con vuestra info y la del bot.