Olá,
Ao terminar o projeto do curso Bootstrap, notei um bug que não foi comentado durante a aula: quando alteramos os tamanhos de tela, o banner fica posicionado corretamente. Entretanto, se temos uma tela menor, abrimos o menu-sanduíche (o que ativa o JS que contém os translates), mesmo que fechemos depois o menu, o translate do JS sobrescreve o translate do CSS que fizemos para melhorar o posicionamento do banner.
Ou seja, esse código (JS):
$('#collapse-navbar').on('show.bs.collapse', function(){
$('.banner').css('transform', 'translate(-50%, 10%)')
});
$('#collapse-navbar').on('hide.bs.collapse', function(){
$('.banner').css('transform', 'translate(-50%, -50%)')
});Sobrescreve esse (CSS):
.banner{
left:0;
transform: translateY(-80%) translateX(0);
}Como vcs corrigiriam esse bug?
Obs.: Ainda não tenho conhecimentos sobre Jquery, mas, como o menu sanduíche só aparece até o tamanho de tela 768px, temos como condicionar o código do Jquery para apenas funcionar com tamanhos até 768px? Não sei se a solução poderia partir daí.
