Olá, Cecília! Boa noite!
Pelo que entendi, você está enfrentando um problema em relação aos efeitos aplicados nos botões do cabeçalho do seu portfólio. Ao adicionar elementos ou alterar valores nos seletores :hover e :active, a página sofre uma pequena movimentação.
No primeiro exemplo que você deu, onde a página se move um pouco para baixo quando você passa o mouse sobre os botões e aparece uma linha embaixo deles, isso acontece devido ao acréscimo da borda inferior (border-bottom) no seletor :hover. Ao adicionar essa borda, o tamanho do elemento aumenta ligeiramente, fazendo com que os elementos abaixo sejam empurrados para baixo.
Para resolver esse problema, existem várias soluções, mas eu vou fornecer duas:
Você pode adicionar uma margem inferior (margin-bottom) igual ao tamanho da borda adicionada. Por exemplo:
.cabecalho__menu__link:hover {
border-bottom: 2px solid #4AF79A;
margin-bottom: -2px;
}
Dessa forma, a margem inferior negativa compensará o aumento de tamanho causado pela borda, evitando que os elementos abaixo se movam.
Ou você pode adicionar uma linha transparente com a mesma espessura da linha colorida usando a propriedade border-bottom ao estilo .cabecalho__menu__link:hover. Dessa forma, a altura do botão não será alterada quando o mouse passar sobre ele, evitando o deslocamento do conteúdo.
Aqui está um exemplo de como o código ficaria:
.cabecalho__menu__link {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 20px;
color: #4AF79A;
text-decoration: none;
border-bottom: 2px solid transparent;
}
.cabecalho__menu__link:hover {
border-bottom: 2px solid #4AF79A;
}
Ao definir a cor como transparente, você mantém a aparência visual desejada sem alterar a altura do botão.
No segundo exemplo, onde o botão "sobre mim" se movimenta quando você clica no botão "home", isso pode acontecer devido à alteração do tamanho da fonte (font-size) no seletor :active. Ao diminuir o tamanho da fonte na palavra "home", o tamanho do botão também é reduzido, fazendo com que os demais botões se movam (nesse caso seria o botão "Sobre Mim" que está ao lado do "home"). Para resolver esse problema, você pode definir um tamanho de fonte fixo para os botões, tanto no estado normal quanto no estado :active. Por exemplo:
.cabecalho__menu__link {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 20px;
color: #4AF79A;
text-decoration: none;
}
.cabecalho__menu__link:active {
color: white;
font-size: 20px; /* ou qualquer outro tamanho desejado */
}
Dessa forma, o tamanho da fonte será o mesmo tanto no estado normal quanto no estado :active, evitando que os botões se movam quando clicados.
Ou você pode definir o tamanho da fonte e a cor para o estado normal do botão, adicionando uma regra adicional ao estilo .cabecalho__menu__link. Assim, quando o botão "home" não estiver ativo, ele manterá o mesmo tamanho da fonte e a cor original, evitando a movimentação do botão "sobre mim".
Veja um exemplo de como atualizar o código:
.cabecalho__menu__link {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 20px;
color: #4AF79A;
text-decoration: none;
}
.cabecalho__menu__link:active {
color: white;
font-size: 18px;
}
/* Nova regra para o estado normal */
.cabecalho__menu__link:not(:active) {
font-size: 20px;
}
Com essa nova regra, o botão "home" manterá o mesmo tamanho da fonte do estado normal, independentemente de estar ativo ou não.
Espero que essas soluções possam te ajudar a resolver os problemas com os efeitos nos botões do cabeçalho do seu portfólio! Se tiver mais alguma dúvida, é só me dizer.
Espero ter ajudado e bons estudos!
