Como aumentar corretamente a altura do cabeçalho?

Suporte
1

Olá,
Gostaria de aumentar a altura do cabeçalho:
image
Para exibir um logotipo maior (o cabeçalho manterá a altura padrão no mobile).

Fiz algumas tentativas, mas não consegui, pois aumentar a altura (e a margem superior do conteúdo abaixo, para que o cabeçalho não o sobreponha com sua altura aumentada) causava um erro no recurso de fixação (sticky). Isso impedia a rolagem ou fazia o conteúdo “pular”.

Existe alguma maneira adequada de aumentar a altura do cabeçalho sem quebrar nada?

2

Você já tentou ajustar

#main-outlet {
    padding-top: 5.8572em;
}

Por exemplo

.d-header {
    height: 8em;
}
#main-outlet {
    padding-top: 9.8572em;
}

844×427 13.8 KB

836×377 16 KB

3

Sim, eu fiz. Devo acrescentar que quero o cabeçalho com cerca de duas vezes a altura original e manter a altura padrão quando ele estiver fixo (o que pode ser o principal problema).

4

Bem, consegui fazer isso.
Não tenho certeza do motivo pelo qual encontrei tantos problemas de bloqueio… Ainda há um pouco de pulo, mas são apenas alguns pixels, então não é perceptível a menos que você esteja tentando observar rolando a página extremamente devagar.
Também tenho conteúdo personalizado acima do cabeçalho, o que pode ter contribuído para o problema que encontrei.