Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive intro section with dropdown navigation: flexbox and SASS

#sass/scss
Mariana 320

@marianaceci

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Mariana 320

@marianaceci

Posted

Muito obrigada pelo feedback!! Sempre ajuda!! Eu tinha esquecido mesmo de colocar o header.. haha já arrumei isso. Quanto ao transition, se eu colocar left ao inves de right como você mostrou, pra mim fica aparecendo a rolagem de tela na direção horizontal até onde o menu está. Tentei colocar 'overflow-x: hidden', mas não funcionou. Talvez eu esteja deixando passar algum detalhe.. vou dar uma olhada com mais calma

0
Adriano 33,970

@AdrianoEscarabote

Posted

Oi Mariana, tudo bem? Tudo está muito bom, mas tenho algumas dicas que acho que você vai gostar:

A tag nav deve estar dentro da tag header, já que a tag nav significa a barra de navegação que geralmente usamos dentro do cabeçalho!

Para adicionar uma transição no mobile menu podemos fazer algumas mudanças:

.navbar .show-menu {
    left: 36vw;
}
.navbar .menu {
    left: 100vw;
    transition: 0.8s;
}

Fazendo isso teremos o conteudo pargindo da direita para a esquerda e com uma pequena transição!

o restante está ótimo!

espero ter ajudado... 👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord