Olá a todos.
Adicionei os códigos aqui aos campos necessários, mas não funcionou. Onde estou errando?
Também tentei o plugin, mas ele quebra a área da barra de pesquisa.
hmmm, sim, suspeito que você terá que fazer um trabalho extra de CSS para fazer a barra de cabeçalho funcionar com links.
Pergunta, você também está desenvolvendo para dispositivos móveis? Porque o cabeçalho no celular tem muito menos espaço para adicionar coisas. Você não vai querer fazer um site bonito para desktop e descobrir que sua visualização móvel está uma bagunça.
Não me lembro de cabeça, mas também pode haver um plugin-outlet lá que você pode usar. 
Olá Lilly.
Eu quero fazer isso apenas para desktop.
A visualização móvel está boa agora, não quero estreitar a área do cabeçalho lá.
Se não acontecer, aliás, não é um grande problema. Este botão redirecionará para uma categoria de fórum.
Eu só queria que esse botão desse uma atmosfera agradável.
1 curtida
Você quer dizer um ícone nesta área, por exemplo?
Você pode detalhar o que está procurando exatamente?
O ponto de extensão do plugin aqui nesta área é before-header-panel.
Isso é usado pelos componentes Custom Header Links e Header Search.
Custom Header Links é o caminho a seguir!
Como Lilly afirmou, você precisará ajustar o CSS aqui.
Pelo que vejo, o componente Header Links usa algum CSS no contêiner do ponto de extensão, o que pode explicar por que ele quebra a pesquisa.
Se você não se importar, pode habilitar o componente novamente para que eu possa olhar diretamente em seu fórum?
4 curtidas
Está explicado aqui, mas quando escrevo os códigos necessários, não funciona.
Agora está ativado, você pode olhar, obrigado pela ajuda 
Obrigado!
Tente adicionar este CSS:
.floating-search-input-wrapper .floating-search-input {
margin: auto;
}
1 curtida
Quando uso este código, ele parece normal para o usuário anônimo. Mas não parece normal para o usuário logado. A razão são os códigos que usei para centralizar a barra de pesquisa.
Estou logado e a exibição está como esperado. Vejo a busca centralizada. Veja minha captura de tela.
2 curtidas
Sim, ele adicionou manualmente margin-right: -35px; para compensar o painel de cabeçalhos, e agora, com o link, o valor precisa ser ajustado novamente.
2 curtidas
O motivo pelo qual faço isso é porque a barra de pesquisa não se move para a esquerda ou para a direita para o membro logado. A barra de pesquisa permanece no mesmo lugar, tanto antes quanto depois de você fazer login.
Mas parece que também afeta o plugin Custom Header Links. Acho que não colocarei um botão lá por enquanto. Se pudermos adicioná-lo com CSS e HTML, gostaria de tentar.
Obrigado por dedicar seu tempo. 
1 curtida
Você também pode tirar a barra de pesquisa do fluxo com posição absoluta.
Você não precisará mais de margin.
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* altura do cabeçalho - altura da pesquisa - margem - borda */
width: 100%;
}
Talvez seja necessário adicionar uma media query para controlar a largura em resoluções mais baixas e garantir que ela não se sobreponha a outros elementos.
Isso é ótimo, muito obrigado, vou controlar/verificar.
Mas, quando habilito os Custom Header Links, a seção do cabeçalho não fica normal.
Isso não é um grande problema. Eu só queria adicionar algo visualmente à seção do cabeçalho.
Olá @Arkshine, acabei de perceber. Após este código, o logotipo não pode mais ser clicado.
Acho que está relacionado ao código position: absolute;.
Você pode adicionar esse CSS para fazer o logo empilhar acima da pesquisa.
.home-logo-wrapper-outlet {
z-index: 1;
}
Você tem outra solução para o CSS floating-search-input em vez de lidar com as laterais (certifique-se de remover o CSS em floating-search-input-wrapper):
.floating-search-input {
position: absolute;
left: 0;
transform: translateX(calc(50vw - (33rem / 2)));
}
Muito obrigado Arkshine