3
respostas

Header deslocando ligeiramente

Boa noite,

Finalizei o curso de HTML e CSS e percebi que no website criado da Barbearia Alura a logomarca e o menu de navegação se deslocam ligeiramente na página de produtos.

Modificando o código percebi que isso somente ocorre quando os 3 produtos estão alinhados horizontalmente.

Também percebi utilizando o devtools no Chrome que a largura do header muda. Por exemplo, na página HOME a largura do mesmo seria 1754,67 e ao mudar para a página PRODUTOS a largura muda para 1771,33 (para o meu caso, é claro).

Esse comportamento é normal ou existe alguma forma de corrigi-lo?

3 respostas

Fala ai Nícolas, tudo bem? Eu diria que tratando-se do header, logo e menu não deveria acontecer.

Talvez porque você está utilizando medidas de CSS flexíveis, e nesses pode ser que faça sentido utilizar medidas fixas.

Ou seja, definir um tamanho fixo para a logo e espaçamento fixos para o header/menu.

Espero ter ajudado.

Olá Matheus, obrigado por responder!

Utilizei medidas fixas mesmo. Vou compartilhar o código e se você tiver alguma sugestão de como corrigir o problema fico feliz em testar!

https://jsfiddle.net/nicodiveira/ngwk7zxy/

Fala Nícolas, testei o seu fiddle aqui e funcionou de boa.

Não consegui simular ou visualizar esse problema do header deslocar.

Abraços.