Eliminar Ícone do menu em modo responsivo no celular
-
Bom dia,
Gostaria de saber se teria alguma forma de eliminar um ícone que utilizei como item do menu quando o site se ajusta no celular.No caso, quando ele visualizado no PC o ícone fica e quando entra em modo responsivo no celular ele terá que sair.
Teria algum modo em css que isso seja possível??
-
Olá, @evandrosr.
Tem sim. Você precisa usar o @media no CSS. Com ele você consegue definir diferentes regras de css para diferentes dispositivos. Exemplo:
@media (max-width: 480px) { body { background-color: red; } }
No código acima, a cor de fundo vai ficar vermelha quando a largura for de até 480px.
Referências:
tympanus.net/codrops/css_reference/media/Rahmohn, primeiramente muito obrigado p resposta.
Apliquei o código que vc passou no css, mas não ocorreu nenhuma mudança… claro que fiz algo errado, rs.
O ícone que preciso manter no modo normal e tirar para os dispositivos móveis seria esse logo abaixo:
<i class="fa fa-bars fa-2x" style="color:#ffc505"></i>
no caso eu teria que puxar o comando de alguma forma?
@evandrosr, acho que o seu código vai ficar +- assim:
@media (max-width: 768px) { .fa { display: none; } }
Explicando: quando o tamanho da tela for menor que 768px, tudo que tiver a classe .fa vai ficar com a propridade display: none (não vai aparecer).
@rahmohn, deu certo rapaz, porém deu 2 probleminhas… esse ícone é oq ativa o submenu e o msm acabou ficando inativo como se o espaço sumisse… o ideal seria continuar o espaço e apenas sair o ícone… nem sei se isso é possível, mas se desse p tirar apenas o conteúdo entre essas tags:
<i class="fa fa-bars fa-2x" style="color:#ffc505"></i>
Outro problema é que sumiu as redes sociais que também foram adicionadas como item do menu desta forma:
<li class="social"><a href="#" title="YouTube"><i class="fa fa-youtube-play"></i></a></li><li class="social"><a href="#" title="Facebook"><i class="fa fa-facebook"></i></a></li><li class="social"><a href="#" title="Instagram"><i class="fa fa-instagram"></i></a></li><li class="social"><a href="#" title="Twitter"><i class="fa fa-twitter"></i></a></li>
Espero que tenha sido bem claro… qualquer coisa tento explicar melhor… obrigado!!
Você pode usar a propridade “visibility: hidden;” em vez de “display: none”. Sobre o segundo problema, está sumindo outros ícones pq o exemplo que dei aplica a propridade em todos os elementos com a classe .fa. Para isso não acontecer, você pode colocar um classe para diferenciar esses ícones que você não quer que apareçam e aplicar o css nessa classe.
Referências:
https://tympanus.net/codrops/css_reference/visibility/@rahmohn, ficou perfeito! Mas para não deletar os outros ícones puxei uma imagem em png através do css… ai criei uma classe apenas p ela.
Tentei criar uma nova fonte, mas não consegui de imediato…
Vou ainda tentar mudar a classe da fonte que o tema utiliza para não conflitar , mas por hora ficou ótimo..
Muito obrigado!!!
- O tópico ‘Eliminar Ícone do menu em modo responsivo no celular’ está fechado para novas respostas.