Bouton navbar ne fonctionne pas.

7 mai 2022 à 10:58:54

Bonjour.

Je peine avec un site simple.

J'essayer de créer une Navbar responsive avec un bouton. J'ai utiliser boostrap avec un bouton collapse. MLe bouton apparait mais malheureusement le menu ne s'affiche pas quand on clique dessus.
Je cherche depuis une semaine. J'ai ajouter les CDN boostrap en css et js et même Jquery comme le consiel certain forum.

Mais je ne trouve pas...

Selon mes cours et les tutos que j'ai consulté, normalement le menu devrait apparaitre quand on clique sur le hamburger. Mais rien.

il y a surement qqch que je vois pas ou encore plus probable, quelque chose que je n'ai pas compris.

Pouvez vous m'aider SVP?

Merci pour vos conseils.

pour le Css :

* {
  font-family: 'EB Garamond', serif;
  box-sizing: border-box;
}

Pour le HTML :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Association Lac de Velour</title>
		<link rel="stylesheet" href="style.css" />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,600&display=swap"
			rel="stylesheet"
		/>

		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
			crossorigin="anonymous"
		/>
		<script
			src="https://code.jquery.com/jquery-3.6.0.js"
			integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
			crossorigin="anonymous"
		></script>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
			crossorigin="anonymous"
		></script>
	</head>
	<body>
		<nav class="navbar bg-dark navbar-expand-sm navbar-dark">
			<button
				class="navbar-toggler"
				type="button"
				data-toggle="collapse"
				data-target="#barMenu"
				aria-expanded="false"
				aria-controls="barMenu"
			>
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="menu collapse navbar-collapse" id="barMenu">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#">Qui sommes nous?</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">La Camarilla française</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Jeux de Rôle Semi réel</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Nos dates</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contacts</a>
					</li>
				</ul>
			</div>
		</nav>

		<div class="title">
			<h1>Association Lac de velour</h1>
		</div>
		<div class="card">
			<div></div>
			<div></div>
		</div>
		<div class="card">
			<div></div>
			<div></div>
		</div>
		<footer>Liens utiles</footer>
	</body>
</html>

j'utilise : le CDN de boostrap 5.1.3, css et js.

Pour l'indentation J'ai une indentation automatique dnas VSCODE qui ne semble pas optimale.

-
Edité par CedricAngeletti 8 mai 2022 à 8:54:06

AbcAbc6

7 mai 2022 à 11:04:30

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Bonjour, passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Toutes balises d'affichage DOIT ce trouver entre <body> et </body> et pas en dehors.

noopy360

7 mai 2022 à 22:18:54

Salut, avant même de commencer il y a truc qui me brule les yeux o_O

Ligne 41 :

<footer>Liens utiles</footer>

qui ce trouve en dehors du <body>...

Ligne 7 et 24 : attention les balises <div> et <ul> se croises.

Attention aussi à l'indentation qui trop souvant mal fait donc illisible pour les autres et toi plus tard quand tu voudras te relire

Quand tu as un problème pense toujours par faire passer ton code dans les correcteurs (voir ma signature) !

Ensuite pour ton problème, tu nous a donner que le html sans le css qui peut modifier beaucoup de chose et il serait cool aussi de nous montrer le resultat souhaiter via une image par exemple car un dessin vos mille mots

Pense aussi à indiquer quel version de bootstrap tu utilise

-
Edité par noopy360 7 mai 2022 à 22:22:55

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

CedricAngeletti

8 mai 2022 à 8:28:10

merci pour tout ces conseil. Je début et je n'ai vraiment pas l'habitude des forums.

je corrige mon message dès que possible.

Merci

AbcAbc6

8 mai 2022 à 10:25:07

Bonjour, il vaut mieux ne pas corriger le code fournis en premier (excepter pour la mise en forme) car maintenant nos réponses n'ont plus de sens.

tu n'as pas les bons attribut data. Remplace le bouton par :

            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#barMenu"
                aria-expanded="false"
                aria-controls="barMenu"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

Voir la doc https://getbootstrap.com/docs/5.1/components/navbar/#external-content

CedricAngeletti

8 mai 2022 à 19:50:42

Merci pour la réponse.

Dsl pour le changement de message initial.

pour le code.

Je viend de voir un message de firefox en console.

Element.setCapture() est obsolète. Utilisez Element.setPointerCapture() à la place. Pour plus d’informations https://developer.mozilla.org/fr/docs/Web/API/Element/setPointerCapture

ce message m'oriente vers le fichier

view-source:resource://devtools/server/actors/emulation/touch-simulator.js

J'ai récupéré des code de tutos sur internet sur le sujet. Mais Je me retrouve avec le même message.

ça vous dit quelque chose?

-
Edité par CedricAngeletti 8 mai 2022 à 19:52:56

DeenBurbigo

15 mai 2022 à 1:40:48 - Message modéré pour le motif suivant : Toute forme de publicité est interdite

CedricAngeletti

19 mai 2022 à 9:25:36

bonjour.

Après mainte tentative j'ai tout repris mon code.

J'ia toujours l'erreur dans mozilla mais ma barre fonctionne enfin.

merci pour votre aide

AbcAbc6

19 mai 2022 à 9:30:24

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e