Menu Bootstrap

24 respostas
htmlwebcss
L

Boa tarde, eu estou fazendo um site, ele já está pronto, só falta uma coisa. Eu estou usando o Bootstrap para fazer o front-end dele, mas não sei por que, todos os navbar que eu uso, dá isso, o menu do width do computador está com o mesmo menu do celular, com o hambúrguer. Alguém pode me ajudar, por favor? Segue em anexo o que está acontecendo

24 Respostas

V

Oi, Léo! Você poderia posta o código do menu para gente ver? :grinning:

J

Com imagem nao dá pra reproduzir o problema, posta o código necessário pra reproduzir o problema.

L

Siiiim, claro. Me desculpa, eu só copiei e colei o navbar do Bootstrap :sweat_smile:
Grau 1 Terceirizações


L

Aaaaaaaa

L

Claro, mandei pra vanribeiro também :grin:

V

Dentro de button:

aria-expanded = "false"

tente mudar de false para true, atualize a página para ver o que acontece.

L

Nada :confused:

V

Estava dando uma olhada na documentação… Tenta colocar, depois de <nav class="navbar ..."> esse comando navbar-expand-lg.

L

Fooooooi, obrigado :grin: mas o menu está centralizado, tem como eu colocar ele ao lado do nome?

V

Hum, pelo que entendi, tem sim. Dá uma olhada na documentação. :grinning: :blush:

L

Não tô conseguindo, mesmo copiando os navbar, eles ficam no centro :cry:

V

posta uma foto aqui de como ficou?

L

Claro

L
<nav class="navbar navbar-dark bg-dark navbar-expand-lg"> só mudei isso do menu
V

Na lista, onde está inserido os links, substitua por isso, depois de nav, tente justify-content-left:

<ul class="nav justify-content-left">

Outras configurações disponíveis.

L

Tentei, mas a única coisa que acontece é deixar o texto do menu em azul :pensive:

L

Pelo que eu tentei até agora, os menus do Bootstrap que eu tentei, todos ficam no centro, alguns até vazam da tela pra ficar no centro. Deve ser alguma coisa no CSS do bootstrap. Onde que deve estar esse
text-align: center; ? uhaahuuhahu

V

@LeoStella , perdão pela demora… :blush: Criei menu aqui com o bootstrap e funcionaram. Precisa observar se está utilizando a classe collapse navbar-collapse.

Alinhamento à esquerda:

Usei:

<div class="collapse navbar-collapse " id="navbarNav">
		<ul class="navbar-nav">
			      <!-- Mais código aqui-->
		 </ul>
  </div>

Alinhamento no centro:

Usei:

<div class="collapse navbar-collapse justify-content-center " id="navbarNav">
		<ul class="navbar-nav">
			      <!-- Mais código aqui-->
		 </ul>
  </div>

Alinhamento à direita:

Usei:

<div class="collapse navbar-collapse justify-content-end " id="navbarNav">
		<ul class="navbar-nav">
			      <!-- Mais código aqui-->
		 </ul>
  </div>

Todos eles são responsivos:

L

Vi aqui qual eu estava usando, eu estou usando o alinhamento a esquerda, mas mesmo assim ele está para a esquerda, tentei substituir pelo o que está ali, mas sem sucesso

L

tentei usar o alinhamento a direita, mas ele continua no centro, e com esse menu, ele vem pouca coisa para a direita, mais ou menos uns 2cm

V

Post seu código atual aqui. Mas post o código e não a imagem. :grinning:

L
<div class="collapse navbar-collapse " id="navbarNav">
	<ul class="navbar-nav">
V

Tente:

<div class="collapse navbar-collapse justify-content-left" id="navbarNav">

  </div>

Por acaso você está usando algum CSS além do bootstrap?

L

Boa tarde faz um teste, logo após o seu nav, acrescenta uma div e coloca o conteúdo até antes de acabar o nav lá:

  • <nav class="navbar navbar-dark bg-dark">
    
  • <div class="container-fluid">
    
  • //Conteudo....
    
  • <ul class="navbar-nav ml-auto"> //acrescenta ml-auto pra dar margin left automaticamente
    
  • //conteudo.....
    
  • </ul>
    
  • </div>
    
  • </nav>
    

Abraço

Criado 14 de outubro de 2018
Ultima resposta 22 de nov. de 2019
Respostas 24
Participantes 4