Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde caros amigos do fórum.
Comecei a trabalhar com sites responsivos (bootstrap) há pouco tempo e ainda não tenho pleno domínio no assunto.
Bom, desenvolvi um site (não responsivo) pra um cliente há alguns meses e o proprietário pediu recentemente para que eu o torna-se responsivo. Acontece que o site tem um sub-menu pra o link Produtos. Causam-me dois problemas:
1) Quando o site é visualizado em aparelhos móveis os links não ficam um embaixo do outro, como deveriam ficar;
2) Os links do sub-menu não pode aparecer da forma que está aparecendo, pois dessa maneira só os dois primeiros são mostrados.
Pra ajudar vou disponibilizar o link do site. Peço que vejam ele no 'Responsive Mode Design', pois o problema é só quando ele é exibido em dispositivos móveis. **Importante: **para fazer o sub-menu, utilizei um arquivo CSS (menu.css), provavelmente é isso que está dando o problema, mas não consigo descobrir como corrigir.
[Link para o site](http://dcginfo.com/develop/fishtag/)
Qualquer ajuda é bem vinda e agradeço desde já à todos que se propuserem a ajudar.wanderval, muito obrigado pela ajuda amigo. Respondendo:
1) Acredito que isso já resolverá meu problema. Quando eu fiz esse site, eu não usava elemento dos bootstrap. Portanto, tive que criar esse recurso só com css.
2) Vou observar melhor isso.
3) Você tem toda razão. Eu fiz por imagem porque não estava conseguindo alinha por texto. Vou corrigir tbm.
4-) Desconhecia flexbox , vou dar uma estudada nisso.
Muito obrigado mais uma vez pela ajuda, me ajudou demais! Grande abraço.
wanderval, muuuuito obrigado pela ajuda. Resolveu meu problema.
1-Olá ment0r, pra começar acho você deveria usar o proprio menu responsivo do bootstrap. Isso vai facilitar sua vida
https://getbootstrap.com/docs/4.0/components/navbar/#nav
2-você usa uma classe .navbar-brand que atualmente não ocupa o height de 100% entao quando você redimenciona a pagina o menu sobrepoe a imagem do logo e quando se aplica height 100% a img com a classe .img-sub é ocultada, acredito por você estar usado seu proprio css de menu esteja gerando conflito de css.
Apos alterar para o menu do bootstrap acredito que alguns desses problemas possa desaparecer, caso contrario, acredito que precise melhor a estrutura do seu header.
3-não é algo que me parece responsivo você usar uma img para exibir uma frase, o correto seria usar um elemento de texto e aplicar icones, isso permite que você aumente sua fonte como quiser, e o container dessa frasse tb deve receber um cuidado para quando a tela for redimencionada ela ser colocada abaixo do menu para não gerar quebra do layout
4- Uma dica comece a usar flexbox ao invez de float, isso vai te poupar de alguns side-effects, sim mas não nesse projeto pq isso iria gerar outros tipos de dor de cabeça
Resumindo: altere o menu para o elemento do menu recomendado pelo bootstrap aplique suas customizaçoes de layout de caso não obtiver um bom resultado, nos permita saber para ajudarmos você.