• Resolvido evandrosr

    (@evandrosr)


    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??

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • Moderador Ramon Ahnert

    (@rahmohn)

    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/

    Criador do tópico evandrosr

    (@evandrosr)

    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?

    Moderador Ramon Ahnert

    (@rahmohn)

    @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).

    Criador do tópico evandrosr

    (@evandrosr)

    @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!!

    Moderador Ramon Ahnert

    (@rahmohn)

    @evandrosr

    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/

    Criador do tópico evandrosr

    (@evandrosr)

    @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!!!

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • O tópico ‘Eliminar Ícone do menu em modo responsivo no celular’ está fechado para novas respostas.