Como centralizar a pesquisa do cabeçalho?

Olá 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;
}

Eu escrevi esses códigos, quando os adiciono ao campo CSS, fica do jeito que eu quero, mas não fica assim em outros.
Você pode me ajudar, por favor?
https://pvpfarm.com

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

Olá amigos úteis.
Como posso centralizar isso?
Parece diferente quando logado. Parece diferente depois de fazer o login.
Quero que ele fique sempre bem no meio e na mesma posição.


https://pvpfarm.com

Obrigado. :pray:

1 curtida

Apenas um palpite, mas o deslocamento parece ser devido à diferença de largura dos botões de login em relação ao botão do menu de pesquisa e ao avatar.

2 curtidas

Sim Lilly, este é exatamente o problema. Podemos encontrar uma solução para isso?

Este é o mesmo problema que você teve neste tópico
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

2 curtidas

por que você está mostrando a barra de pesquisa para usuários anônimos? esquece. Já estou lá. Pensei que clicar na barra de pesquisa abriria a janela modal de login, mas ela me permite pesquisar… Dando uma olhada rápida.

Estou achando tudo muito bugado no Chrome do meu Macbook. Os botões do cabeçalho estão abrindo os menus errados e tentar fechar a gaveta de chat abre o menu hambúrguer, etc.

Não tenho uma resposta para o porquê - minha suposição é que há algum SCSS conflitante. Você e seu fórum estão progredindo :slight_smile: - não desanime; comparado a quando você começou aqui, seu site está muito melhor. CSS é complicado se você não tem experiência e muita coisa pode ficar bagunçada rapidamente se você não for cuidadoso. Apenas leve seu tempo e leia alguns dos tópicos da base de conhecimento em Documentation aqui. Acho que se você simplificar e otimizar um pouco seu CSS, você resolverá os problemas.

3 curtidas

Estou muito surpreso agora :hushed:, eu também não tenho esse problema. Talvez esse problema esteja ocorrendo porque você traduziu o idioma do site? O idioma principal do site é o turco.

Verificarei isso no meu macbook em breve.

Eu gostaria muito de minimizar os códigos, mas era muito complicado.

Posso te dar autoridade de administrador. Você pode testemunhar o quão complicado é. :sweat_smile:

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

Este código resolveu meu problema, aliás. Mas não parece bom.

3 curtidas

O conteúdo do cabeçalho e o conteúdo da página são centralizados independentemente um do outro, portanto, se, por exemplo, o cabeçalho tiver mais conteúdo à esquerda ou à direita, o centro do cabeçalho será diferente.

Aqui estão algumas ilustrações disso, aqui o “centro” do cabeçalho muda com base na quantidade de conteúdo à direita:



Não há uma maneira simples de garantir que o centro do cabeçalho e o conteúdo da página sejam sempre os mesmos, especialmente considerando que a largura do conteúdo do cabeçalho pode mudar (devido a traduções, número de botões, etc.).

Isso funciona porque o conteúdo à esquerda (logo) agora tem a mesma largura do conteúdo à direita (container de botões). Você precisará de um trecho de CSS separado para segmentar .anon (deslogado) porque botões diferentes são exibidos à direita. As traduções, como você notou, também farão com que os botões tenham tamanhos diferentes, o que afetará o alinhamento.

4 curtidas

Obrigado @awesomerobot, obrigado por explicar com screenshots. Foi muito compreensível para mim. :hugs:

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

Estou tentando dessa forma também, mas é como o jogo da cobrinha no Tetris. Os dois ficam se perseguindo na tela. :sweat_smile:

Solução


/* 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 */

Você pode ajustar os pixels de acordo com suas necessidades.

1 curtida