1

Estou desenvolvendo um site e me deparei com um erro no qual a logo não é exibida corretamente quando o site é aberto no celular, mesmo no Responsive Design Mode do Firefox ela é exibida do modo que eu desejo, porém ao abrir no telefone aparece de outro modo, ao invez da logo "escorrer" para a esquerda do meu menu de navegação e ficar no topo da página, ela fica abaixo do menu de navegação.

Segue o link para que possam observar o html: http://primerproducoes.com/primernew/site/

Como fica no celular: https://i.sstatic.net/6twHm.jpg

O resultado desejado seria esse: https://i.sstatic.net/fM7QN.png

Já tentei alterar a width do objeto que seria o mais óbvio a se fazer porém não muda em nada.

Obrigado pela atenção.

2 Respostas 2

1

Seu problema é que vc não seguiu direito a documentação do Navbar do Bootstrap, agora acredito que só vai conseguir arrumar isso no jeitinho...

Veja

inserir a descrição da imagem aqui

A minha dica é remover o float quando a tela for menor que 992px usando um media querie

@media screen and (max-width:992px) {
    .navbar-brand {
        float: inherit;
    }
}
2
  • Na verdade esse Boostrap veio com o template que eu usei, estou tendo vários problemas com ele, tenho que ler a documentação novamente com mais atenção. Obrigado pela resposta rápida :) Commented 12/03/2019 às 19:53
  • @RonaldoGueller aqui tem a documentação da Navbar da versão 3 que me parece ser a que vc está usando getbootstrap.com/docs/3.3/components/#navbar . Outra coisa é que infelizmente vc só pode dar a resposta como aceita ✔ para apenas uma resposta... Mas se vc achar que ajudou vc tb pode usar as setinhas para sinalizar. Boa sorte no projeto
    – hugocsl
    Commented 12/03/2019 às 19:56
0

Boa tarde,

Eu fiz um teste definindo max-width e parece ter funcionado da forma que vocÊ gostaria.

<a class="navbar-brand page-scroll;" href="#page-top" style="max-width: 260px;">
    <img src="images/logo2.png" alt="Primer Produções HD Logo" id="logo">
</a>

Como você quer alterar apenas a forma como aparece no mobile, você pode adicionar essas linhas ao seu CSS:

@media (max-width: 576px) {
    .navbar-header .navbar-brand {
        max-width:260px;
    }
}

Espero que ajude.

2
  • Resolveu o problema, mas o seu post diz @media (min-width: 576px) quando o que funcionou foi max-width. Obrigado pela resposta rápida :) Commented 12/03/2019 às 19:51
  • Falta de atenção minha, mas bom saber que ajudou.
    – Rafael S.
    Commented 14/03/2019 às 1:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .