Nav Bar bouton responsive repliable

Fermé

malo91 - Modifié le 27 mai 2021 à 12:04
malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 - 27 mai 2021 à 15:20

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

A voir également:

Nav Bar bouton responsive repliable
Nav privée - Guide
Réinitialiser chromecast sans bouton - Guide
Batterie bar - Télécharger - Informations & Diagnostic
Google bar - Télécharger - Navigateurs
Bouton reinitialisation pc - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38305 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
27 mai 2021 à 12:08

Bonjour,

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

Réponse 2 / 4

malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 1
27 mai 2021 à 13:14

Hello
5.0.1

Réponse 3 / 4

jordane45 Messages postés 38305 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
Modifié le 27 mai 2021 à 14:22

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

Réponse 4 / 4

malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 1
Modifié le 27 mai 2021 à 16:10

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

Discussions similaires

Quel est la touche shift sur le clavier

ou est la touche shift sur un clavier

Est-ce grave si je déssinstalle " bing bar "?

symbole arrêt marche