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

Menu Hamburguer clickado diferente do Figma!

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Contato e footer

por Adriano Crocco
| 20.1k xp | 9 posts

Olá pessoal!

Fiquei com dúvida com o Menu Hamburguer pois no Figma ele por padrão é azul com o fundo branco e ao clicar para abrir as opções logo embaixo, ele fica com cor branca e fundo azul!

Como na imagem abaixo! Menu Clickado e não clicado

Isso não foi demonstrado em aula, tentei fazer algo aqui e o máximo que consegui foi aplicar:

.cabecalho__menu__hamburguer:active {
    background-color: var(--azul);
}

Que não faz ele PERMANECER na cor azul, porém ele pisca o fundo laranja quando eu abro e fecho o menu!

Como fazer para ficar exatamente igual o FIGMA quando clicar no menu?

Att.

3 respostas
por Maria Eduarda Gonçalves Furlan
| 1940.4k xp | 6655 posts
Instrutor Monitora de Fórum | Alura

Olá, Adriano! Como vai?

Para realizar as alterações que você deseja no projeto e deixá-lo igual ao da aula, vou te indicar um trecho específico da aula Customizando o Menu Hambúrguer a partir de 1:20. Nesse ponto da aula, a instrutora explica como aplicar a cor no menu.

Aqui estão as alterações que você deve fazer no seu código para obter a cor no menu:

.lista-menu__titulo {
    color: var(--laranja);
    font-weight: 700;
}

.lista-menu__link {
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

Essas são as propriedades CSS que você precisa adicionar ao seu código para que a cor seja aplicada corretamente no menu.

Espero ter conseguido ajudar! Se tiver alguma dificuldade para realizar as alterações, por favor, me envie o seu código completo ou um link para o repositório,assim consigo te ajudar de forma mais assertiva. Boa sorte com o seu projeto!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!
por Adriano Crocco
| 20.1k xp | 9 posts

Olá Maria! Isso eu tenho no código e não faz o botão do menu hamburguer ficar com fundo azul e o ícone branco quando clicado!

O que eu quis dizer foi isso:

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

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

E exatamente isso não foi demonstrado em aula, mas está no Figma e gostaria de replicar no meu projeto!

por Adriano Crocco
| 20.1k xp | 9 posts

Para quem está coma mesma dúvida que eu, no final do curso ela volta nessa questão!

Att.