Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Transição em elementos posicionados com Flexbox

Referente ao curso Bootstrap: criação de uma single-page responsiva, no capítulo Chamada em destaque no cabeçalho e atividade Conflito da navbar com a chamada principal

por Matheus Gomes
| 97.4k xp | 50 posts
Estudante de Gestão de TI

Olá.

Optei por posicionar o banner utilizando flexbox, pois fiz um curso aqui na Alura sobre flexbox e achei uma excelente prática para posicionar elementos.

No entanto, embora o elemento tenha ficado devidamente posicionado no meio, ele apresenta um bug quando o "menu hamburger" é ativado, fazendo com que o banner vaze para a próxima section.

Modifiquei o javaScript trabalhado na aula para se adaptar à utilização do flexbox, porém não funcionou. Inclusive, percebi que o console do browser está apresentando inconsistências.

Help!

Segue abaixo tela dos erros e códigos utilizados por mim.

Imagem: https://drive.google.com/open?id=0B6nSv0JDMQPQSmJORE5hdThUakU

Código: https://github.com/matheusnascgomes/curso-bootstrap

1 resposta
solução!
por Ulisses do Vale Lopes
| 264.7k xp | 1 posts

Matheus, vi seu código e encontrei duas coisas.

Primeiro, o evento não está funcionando:

$('#navbar-topCasaFina').on('show.bs.collapse', function(){
     $('.container-banner').css('align-items', 'flex-end');
});

Aqui o id do button está selecionado, mas, pela documentação do bootstrap, deveria ter sido selecionado o target do collapse. Desse modo:

$('#menu-lista').on('show.bs.collapse', function(){
     $('.container-banner').css('align-items', 'flex-end');
});

Segundo, quando o menu é ativado, o flex-container está sendo empurrado para baixo também e, com o flex-end, o banner vai mais pra baixo ainda. Você poderia mudar pra flex-start ou ajustar o height do flex-container, mas minha sugestão seria usar o translateY:

$('#menu-lista').on('show.bs.collapse', function(){
     $('.container-banner').css("transform", "translateY(-25%");
});

Espero que dê certo assim! Bons estudos! :)