Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Challenge 1 - Não consigo fazer a logo desaparecer no menu mobile

por Thiago Alves Ballalai de Carvalho
| 42k xp | 9 posts

Olá,

Eu estou fazendo o challenge 1 de front-end e estou fazendo ele com a ideia do mobile-first.

Pelo o que eu compreendi do figma, o header mobile é para ficar assim:

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

Ao clicar na lupa é para esse header ficar assim:

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

No caso, é para todos os elementos que existiam anteriormente sumirem e darem espaço para a simbolo de fechar e o campo de busca.

Minha dificuldade é fazer isso acontecer, pois não estou conseguindo fazer a logo desaparecer afinal este é um elemento que está aparecendo antes do meu checkbox.

Segue o meu código no github: https://github.com/thballalai/FE-AluraChallenge-1

Assim como o GitHub Page dele: https://thballalai.github.io/FE-AluraChallenge-1/

2 respostas
por Ariel Viana Oliveira
| 32k xp | 13 posts
Técnico de enfermagem

Boa tarde meu amigo! Tudo bem? Dei uma olhada no seu código, e a primeira coisa que aconselho a mudar, é adicionar o border box no seu reset:

  • { box-sizing: border-box; }

E em relação ao seu problema:

a imagem não vai receber nem mudar a opacidade, então recomendo dar um: width: 0px;

por Thiago Alves Ballalai de Carvalho
| 42k xp | 9 posts

Boa tarde!

Irei fazer a adição do box-sizing no meu reset.css, não o conhecia. Obrigado.

A opacidade da imagem não está sendo o problema. O meu problema está sendo o seguinte:

O códido a seguir não funciona pois o elemento com id="search" está aparecendo no html após o elemento com class="header__logo"

#search:checked ~ img.header__logo {
    display: none;
}

    <header class="header">
        <div class="container header__container">
            <img class="header__logo" src="./assets/img/Logo.svg" alt="Logo da AluraDev">

            <div class="header__menu">
                <input type="checkbox" id="search" class="header__input-hide">
                <label for="search" class="header__search"></label>
                <input class="header__search__input" type="search" placeholder="Busque por algo">

Tudo o que eu faço para tentar resolver isso está dando errado.

Minha proxima solução vai ser colocar o código html ao contrário e fazer um .header__container {display: flex; + flex-direction: row-reverse} para ver se resolve.