[Dúvida] Como alterar o Cabeçalho que está em hover? | HTML e CSS: trabalhando com responsividade e publicação de projetos

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Bruna Nobrega de Alcantara

| 6.3k xp | 7 posts

Estudante

Imagem da parte superior mostrando o menu e parte da imagem já com o layout reduzido Eu tenho no meu código as seguites classes que fiz para habilitar o hover:

.dropdown {
    display: inline-block;
    position: relative;
}

.dropbtn {
    background-color: var(--cor-terciaria);
    border-radius: 8%;
    font-family: var(--fonte-secundaria);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cor-secundaria);
    background-color: var(--cor-terciaria);
    padding: 35%;
    border: none;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--cor-hover-secundaria);
    min-width: 160px;
    border-radius: 8%;
    box-shadow: 0px 8px 16px 0px var(--cor-hover-secundaria);
    z-index: 1;
}

.dropdown-content a {
    color: var(--cor-primaria);
    font-weight: 600;
    padding: 12px 16px;
    font-family: var(--fonte-secundaria);
    text-decoration: none;
    display: block;
    border: 5px solid var(--cor-hover-secundaria);
    border-radius: 10px; 
}

.dropdown-content a:hover {
    background-color: var(--cor-hover-terciaria);
    color: var(--cor-primaria); 
    font-weight: 600;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: var(--cor-hover-secundaria); 
    background-color: var(--cor-terciaria);
}

** E funciona com o layout normal, porém com o layout reduzido não funciona. Já tentei só colocar qualquer uma dessas classes acima e não consegui nenhum resultado. Não sei mais o que posso fazer....**

2 respostas

solução!

por Sarah Ocy Sousa Medeiros

| 1837.4k xp | 3782 posts

Alura Scuba Team Monitora de Fórum Ops

04/10/2023

Oi, Bruna! Tudo bem?

Pelo que pude entender, o hover está funcionando corretamente no layout normal, mas não no layout reduzido, certo?

Deixo como sugestão uma possível solução para o problema, que seria adicionar as propriedades de estilo desejadas para o hover em uma media query. Dessa forma, quando o layout for reduzido, as propriedades aplicadas a ele serão utilizadas no lugar das que aparecem no layout de desktop. Segue abaixo um exemplo de como podemos fazer isso:

@media (max-width: 1200px) {
    .cabecalho {
        padding: 10%;
    }

O código acima aplica um preenchimento de 10% em todos os elementos HTML com a classe "cabecalho" quando a largura da tela for igual ou inferior a 1200 pixels. Isso pode ser usado para ajustar o layout e o espaçamento dos cabeçalhos em dispositivos com telas menores, como tablets ou smartphones, para melhorar a experiência do usuário.

Espero ter ajudado!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓

por Bruna Nobrega de Alcantara

| 6.3k xp | 7 posts

Estudante

20/10/2023

Oiii, muito obrigada! Com a sua sugestão eu vi que ele tava se distanciando muito do topo e do conteudo embaixo, aí fiz o seguinte

@media (max-width: 1200px) {
    .cabecalho{
        padding: 0% 0% 0% 45%;
    }

e funcionou, obrigada!!!