Cómo centrar la búsqueda en el encabezado

¡Hola a todos!

.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
    width: 600px;
    left: 150px;
}

.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
    left: 150px;
}

Escribí estos códigos, cuando los agrego al campo CSS, se ve como quiero, pero no se ve así en otros.
¿Me pueden ayudar por favor?
https://pvpfarm.com

Ekran görüntüsü 2024-03-31 132713

Hola, amigos útiles.
¿Cómo puedo centrar esto?
Se ve diferente cuando se inicia sesión. Se ve diferente después de iniciar sesión.
Quiero que siempre permanezca justo en el medio y en la misma posición.


https://pvpfarm.com

Gracias. :pray:

1 me gusta

Solo estoy adivinando, pero el desplazamiento parece deberse a la diferencia de ancho entre los botones de inicio de sesión y el botón del menú de búsqueda y el avatar.

2 Me gusta

Sí Lilly, este es exactamente el problema. ¿Podemos encontrar una solución a esto?

¿Es este el mismo problema que tuviste en este tema
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

2 Me gusta

¿por qué muestras la barra de búsqueda a los usuarios anónimos? olvídalo. Ya estoy ahí. Pensé que al hacer clic en la barra de búsqueda aparecería la ventana modal de inicio de sesión, pero sí me permite buscar… echando un vistazo rápido.

Estoy encontrando muchos errores en Chrome en mi Macbook. Los botones de la cabecera abren los menús incorrectos y al intentar cerrar el panel de chat se abre el menú hamburguesa, etc.

No tengo una respuesta sobre por qué; supongo que hay algún SCSS en conflicto. Tu foro y tú estáis progresando :slight_smile: - no os desaniméis; comparado con cuando empezasteis aquí, vuestro sitio se ve mucho mejor. El CSS es complicado si no tienes experiencia y mucho puede volverse un lío rápidamente si no tienes cuidado. Tómate tu tiempo y lee algunos de los temas de la base de conocimientos en Documentation. Creo que si simplificas y agilizas parte de tu CSS, resolverás los problemas.

3 Me gusta

Estoy muy sorprendido ahora mismo :hushed:, yo tampoco tengo ese problema. ¿Quizás este problema está ocurriendo porque tradujiste el idioma del sitio? El idioma principal del sitio es el turco.

Lo comprobaré pronto en mi macbook.

Me gustaría mucho minimizar los códigos, pero era muy complicado.

Puedo darte autoridad de administrador. Puedes ser testigo de lo complicado que es. :sweat_smile:

@media screen and (min-width:640px){
 .d-header .home-logo-wrapper-outlet,
 .d-header .panel{
        width:240px;
 }
}

Este código resolvió mi problema, por cierto. Pero no se ve bien.

3 Me gusta

El contenido del encabezado y el contenido de la página se centran independientemente el uno del otro, por lo que si, por ejemplo, el encabezado tiene más contenido a la izquierda o a la derecha, el centro del encabezado será diferente.

Aquí hay algunas ilustraciones de esto, aquí el “centro” del encabezado cambia según la cantidad de contenido a la derecha:



No hay una forma sencilla de asegurar que el centro tanto del encabezado como del contenido de la página sean siempre los mismos, especialmente considerando que el ancho del contenido del encabezado puede cambiar (debido a traducciones, número de botones, etc.).

Esto funciona porque el contenido de la izquierda (logo) ahora tiene el mismo ancho que el contenido de la derecha (contenedor de botones). Necesitarás un fragmento de CSS separado para apuntar a .anon (cerrado sesión) porque se muestran botones diferentes a la derecha. Las traducciones, como notaste, también harán que los botones tengan un tamaño diferente, lo que afectará la alineación.

4 Me gusta

Gracias @awesomerobot, gracias por explicar con capturas de pantalla. Fue muy comprensible para mí. :hugs:

@media screen and (min-width:640px){
 .d-header .panel{
  margin-left:-66px;
 }
}

También lo estoy intentando de esta manera, pero es como el juego de la serpiente en Tetris. Los dos se persiguen en la pantalla. :sweat_smile:

Solución


/* arama search bar ortalama */
@media screen and (min-width:640px){
 html:not(.anon) .d-header .panel {
   margin-left: 95px;
    }
} 

.floating-search-input-wrapper {
    margin-right: -35px;
}
/* arama search bar ortalama */

Puedes ajustar los píxeles según tus necesidades.

1 me gusta