Redes sociais como item do menu

  • Resolvido evandrosr

    (@evandrosr)


    7 anos, 7 meses atrás

    Bom dia,

    Meu tema na dá opção das redes sociais entras no mesmo alinhamento do menu, então adicionei os mesmos utilizando o código abaixo com alguns ajustes em css:

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

    Ficou ótimo, mas quando o site se ajusta no celular e o menu entra em modo responsivo, os ícones ficam um embaixo do outro…

    Preciso que eles continuem na horizontal, mas infelizmente não consigo fazer isso de forma alguma

    Abaixo o css que utilizei para ajustar os espaços dos ícones:

    /* redes sociais */
li.social{width: 20px; height: 20px; line-height: 20px; text-align: center; margin: 1000px 20px 20px;}

    Desde de já obrigado

Visualizando 5 respostas - 1 até 5 (de um total de 5)
  • Moderador Felipe Elia

    (@felipeelia)

    7 anos, 7 meses atrás

    Oi @evandrosr,

    Provavelmente o css do seu site tem uma parte dedicada só para o comportamento em telas menores e lá o comportamento das <li> é alterado. Experimente trocar seu código para

    li.social{width: 20px; height: 20px; line-height: 20px; text-align: center; margin: 1000px 20px 20px; display:inline-block;}

    O display:inline-block; fará com que os itens continuem sendo exibidos em linha. Se o código não funcionar, você terá que analisar o css atual e procurar onde os estilos para celular estão sendo gerados, normalmente eles estão entre um código parecido com @media (min-width: 960px) {}.

    Não esqueça de voltar para dizer se conseguiu, se ficou com alguma dúvida e, se for o caso, marcar seu tópico como resolvido.

    Criador do tópico evandrosr

    (@evandrosr)

    7 anos, 7 meses atrás

    @felipeelia, infelizmente não deu certo, e também não consegui editar o css onde ele se ajusta para celulares… acredito que não dará certo, pq os ícones estão como se fosse item do menu, então não sei se conseguirei fazer eles alinharem independentemente do restante do menu…

    mas de qualquer forma vou continuar tentando… obrigado!

    Moderador Felipe Elia

    (@felipeelia)

    7 anos, 7 meses atrás

    Oi @evandrosr, se só eles estão com a classe social sim, é possível. Seu site está disponível em algum endereço? Olhar o código facilitaria para te dar uma direção melhor.

    Criador do tópico evandrosr

    (@evandrosr)

    7 anos, 7 meses atrás

    Bom dia @felipeelia!!

    tenho sim o endereço sim:
    http://siteteste.evandrosr.com.br

    então, na realidade estou quebrando a cabeça por não conseguir editar o “head” de forma correta pois o tema é bem complexo por ter muito recursos…

    e eu estou tentando inserir tudo como itens do menu para ele se adaptar melhor quando responsivo para celulares…

    vc poderá observar que quando vc diminuir a tela o ícone amarelo e as redes sociais irão sumir.. esse é um caso que estou tratando em outro tópico, mas caso possa me dar um caminho ficaria muito grato..

    no caso o ícone precisaria sumir mais os ícones da redes sociais não.. e deixá-los horizontas…

    O ícone sumiu mas o funcionamento do submenu não deu certo… vc poderá observar

    Achei importante falar sobre esse assunto pois está no mesmo menu, talvez um interfira no outros neh…

    Abaixo o css que utilizei até agora para editar o menu:

    `/* icone amarelo */
    li.icone{text-align: center;}

    /* menu intem */
    li.menu-item{text-align: center;}

    /* redes sociais */
    li.social{width: 20px; text-align: center; display: inline-block;}

    /* remover icone */
    @media (max-width: 600px) {
    .fa {
    display: none;
    }
    }`

    Desde de já obrigado!!

    • Esta resposta foi modificada 7 anos, 7 meses atrás por evandrosr.
    Moderador Claudio Sanches

    (@claudiosanches)

    7 anos, 6 meses atrás

    Fechando, já que o tópico não é uma questão de suporte.

Visualizando 5 respostas - 1 até 5 (de um total de 5)
  • O tópico ‘Redes sociais como item do menu’ está fechado para novas respostas.