Nav Bar bouton responsive repliable

Signaler
-
Messages postés
39
Date d'inscription
mardi 2 février 2021
Statut
Membre
Dernière intervention
9 juin 2021
-
Hello !!
j'ai mis une nav bar de bootstrap qui je crois en principe a bien les traits en remplacement lorsque le responsive est en fonction ! moi elle n'apparait pas !! qu'est ce que j'ai oublié? merci bcp

voici ma nav :
<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
  <div class="text-align-left">
  
    <div class="text-align-left">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
 
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav">
        
          <a class="nav-link" href="{{ path('accueil')}}"><i class="fa fa-home" aria-hidden="true"></i>     Accueil -  </a>
        </li> 
        
        <li class="nav-item">
          <a class="nav-link" href="{{ path('app_login')}}"><i class="fa fa-key"aria-hidden="true"></i>     Connexion</a>
        </li>
       <li class="nav-item">
          <a class="nav-link" href="{{ path('app_register')}}"><i class="fa fa-user-plus" aria-hidden="true"></i>     Inscription</a>
        </li>
        <div class="text-align-right">
        </div>
      </ul>
    </div>
  </div>
</nav>


merci pour votre aide

4 réponses

Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Bonjour,

Quelle version de bootstrap utilises tu ? bootstrap 4 ? bootstrap 5 ?


Messages postés
39
Date d'inscription
mardi 2 février 2021
Statut
Membre
Dernière intervention
9 juin 2021
1
Hello
5.0.1
Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Si tu as bien respecté la syntaxe et les exemples donnés sur le site de bootstrap
https://getbootstrap.com/docs/5.0/components/navbar/#nav
ça devrait fonctionner sans pb...

EDIT : Il semble que tu aies oublié une balise <li> à la ligne 12



.
Cordialement,
Jordane
Messages postés
39
Date d'inscription
mardi 2 février 2021
Statut
Membre
Dernière intervention
9 juin 2021
1
exact pour la balise mais bon ca resoud tjs pas mon probleme !! tant pis merci !! je e vois maintenant ce satané bouton et impossible de : 1/ changer sa couleur 2/ il se deroule pas :( ca prend la tete !!

<nav class="navbar navbar-expand-lg  navbar-light">
	<div class="container-fluid">
		<div class="text-align-left">
			<a class="navbar-brand" href="#"><img src="{{ asset(/logo3.jpg')}}" data-toggle="tooltip" data-content=" " alt="titre snowtrick"></a>
			<a href="#" class="btn btn-info" data-toggle="popover" data-placement="bottom"  title="">S</a>
		</div>
		<div class="text-align-left">
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="{{ path('accueil')}}">
							<i class="fa fa-home" aria-hidden="true"></i>
							Accueil -
						</a>
					</li>

					<li class="nav-item">
						<a class="nav-link" href="{{ path('app_login')}}">
							<i class="fa fa-key" aria-hidden="true"></i>
							Connexion</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="{{ path('app_register')}}">
							<i class="fa fa-user-plus" aria-hidden="true"></i>
							Inscription</a>
					</li>
				<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
				</ul>
			</div>
		</div>
	</nav>


une vraie prise de tete pour un truc......