Menu Bootstrap

24 respostas
htmlwebcss
LeoStella

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

vanribeiro

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

javaflex

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

LeoStella

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


LeoStella

Aaaaaaaa

LeoStella

Claro, mandei pra vanribeiro também :grin:

vanribeiro

Dentro de button:

aria-expanded = "false"

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

LeoStella

Nada :confused:

vanribeiro

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

LeoStella

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

vanribeiro

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

LeoStella

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

vanribeiro

posta uma foto aqui de como ficou?

LeoStella

Claro

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

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.

LeoStella

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

LeoStella

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

vanribeiro

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

LeoStella

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

LeoStella

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

vanribeiro

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

LeoStella
<div class="collapse navbar-collapse " id="navbarNav">
	<ul class="navbar-nav">
vanribeiro

Tente:

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

  </div>

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

Lauro_Rafael_Mello

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