1
resposta

Como fazer com que o header se adapte ao tamanho da tela?

Definimos o tamanho da caixa que armazena o header com uma largura padrão de 940px:

.caixa-header{
    position: relative;
    width: 940px;
    margin: 0 auto;
}

Se reduzirmos o tamanho da janela do navegador para menos de 940px, notamos que o menu de navegação passa a ficar oculto - em partes ou por completo.

Como fazer com que o header acompanhe o tamanho da janela de forma que o menu sempre seja exibido?

1 resposta

Isso ocorre devido ao valor definido para a div ('width: 940px'). Significa que ele sempre vai ter esse tamanho, independente do tamanho da tela. Portanto se você diminuir a tela do seu navegador para menos que isso, o menu vai sumindo aos poucos, e lá embaixo vai ter a barra de rolagem para ir para os lados para exibir o resto da div.

obs: depois que se aprende flex-box tudo fica mais facil :D