Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Não consigo mudar a imagem do menu-hamburguer quando clico

Referente ao curso HTML e CSS: responsividade com mobile-first

por Luan Barbosa de França
| 51.6k xp | 3 posts

Boa tarde pessoal, Estou com um problema no qual já tentei de diversas formas solucionar e não consigo. No projeto do AluraBooks para mobile, deveria mudar a imagem do menu-hamburguer ao clicar. Na posição normal ele tem as barrinhas azuis e o fundo branco, ao clicar ela fica barrinhas brancas com fundo azul, usei o código dessa forma no CSS:

.cabecalho__menu-hamburguer:active { background-image: url("../img/Menu Aberto.svg"); }

Tentei também fazer a mudança apenas alterando as cores, sem adicionar imagens, porém quando clico as cores mudam e somem ao invés de continuar já que o menu ainda está aberto.

Alguém poderia me ajudar please ?

2 respostas
solução!
por Rafael Gonçalves
| 944.5k xp | 90 posts
Engenheiro de Software

Certifique que seu codigo esteja assim

HTML

<span class="cabeçalho__menu-hamburguer container__imagem"></span>

CSS

.cabeçalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.container__botao:checked~.container__rotulo>.cabeçalho__menu-hamburguer {
    background-image: url("../img/Menu Aberto.svg");
}

Se ainda tiver problemas verifique o codigo final do projeto: https://github.com/alura-cursos/alurabooks/tree/aula05

por Luan Barbosa de França
| 51.6k xp | 3 posts

Muito obrigado irmão. Solucionou meu problema.