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

Ícone do menu hamburguer bugado

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Pseudo-classes e combinadores

por Deborah Sakamoto Echague
| 74.5k xp | 3 posts

Quando clica no menu-hamburguer ele não muda devidamente, já verifiquei se exportei a imagem correta, chequei com o codigo do repositório e parece tudo certo, mas na prática não funciona, alguém pode me ajudar? 

.container__botao:checked~.container__rotulo>.cabecalho__menu-hamburguer{
    background-image: url("../assets/MenuAberto.svg");
}

.container__botao:checked~.container__rotulo{
    background: var(--azul-degrade);
}


<div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu" class="container__rotulo">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="" class="lista-menu__link">Front-end</a>
                </li>
                <li class="lista-menu__item">
                    <a href="" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="" class="lista-menu__link">Design & UX</a>
                </li>
            </ul>
            <img src="./assets/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>

[https://github.com/deborahsakamoto/AluraBooks.git] (Repositório do meu projeto Alura Books)

3 respostas
por Deborah Sakamoto Echague
| 74.5k xp | 3 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Estudante
| 40.1k xp | 4 posts

Oi Deborah, tudo bem? Não consegui acessar seu código, mas eu imaginei que o problema se deu porque você não colocou o "background-repeat: no-repeat" quando fez a classe do .cabeçalho__menu-hamburguer

Resolvi fazer o teste tirando essa propriedade do meu código, e acabei tendo o mesmo probleminha. Verifica se nessa classe seu código está assim:

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

Espero ter ajudado!

por Deborah Sakamoto Echague
| 74.5k xp | 3 posts

era um detalhezinho minimo, meu codigo estava assim:

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

troquei o 'background-image' por 'background-repeat' e deu certo, obrigada