problème Navbar

Menu dropdown qui ne souvre pas

a marqué ce sujet comme résolu.

Bonjour, la communauté de Zeste de savoir J’ai un souci sur mon site, j’ai créé une nav bar qui fonctionne sur la page d’accueil, mais sur les autres pages le dropdown ne s’ouvre pas, je vous montre le code de la page d’accueil et d’une autre page et vous remercie pour votre aide.

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon sitee</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body style="color:rgb(0,0,0);background-color:rgb(0,0,0);">
    <div>
        <nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background-color:#000000;">
            <div class="container"><a class="navbar-brand text-white" href="#">Jules</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1" style="background-color:#ffffff;color:rgba(136,136,136,0);"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="background-color:rgba(0,0,0,0);"></span></button>
                <div
                    class="collapse navbar-collapse" id="navcol-1">
                    <ul class="nav navbar-nav ml-auto">
                        <li class="nav-item" role="presentation"><a class="nav-link text-white" href="Accueil.html">Accueil</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link text-white" href="portofolio.html">Portofolio</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link text-white" href="contact.html">Contact</a></li>
                            <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">First Item</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
                    </ul>
            </div>
        </div>
      </nav>
    </div>

    <div class="header">
        <h1 class="header-title">Mon site internet</h1>
        <p class="header-para">Je suis un étudiant passionné par la photographie et le développement web&nbsp;</p>
    </div>
    <div class="macouleur"> jjjj
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>`



<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mon sitee</title>
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/styles.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body style="color:rgb(0,0,0);background-color:rgb(0,0,0);">
        <div>
            <nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background-color:#000000;">
                <div class="container"><a class="navbar-brand text-white" href="#"></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1" style="background-color:#ffffff;color:rgba(136,136,136,0);"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="background-color:rgba(0,0,0,0);"></span></button>
                    <div class="collapse navbar-collapse" id="navcol-1">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item" role="presentation"><a class="nav-link text-white" href="Accueil.html">Accueil</a></li>
                            <li class="nav-item" role="presentation"><a class="nav-link text-white" href="portofolio.html">Portofolio</a></li>
                            <li class="nav-item" role="presentation"><a class="nav-link text-white" href="contact.html">Contact</a></li>
                        </ul>
                        <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">First Item</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
                    </nav>
                </div>
                    
                 
                </div>
        </body>
    </html>
    
 

Bonjour et bienvenue !

Tout d’abord, je t’invite à ajouter html après les trois accents graves ouvrant: Exemple: ```html. Essaie aussi de diviser les deux pages en deux blocs différents ^^ .

Concernant les deux pages, la différence entre les deux est l’absence des scripts dans les pages autres que l’accueil. Je parle de ces lignes :

<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

Si tu ajoutes ces deux lignes à la deuxième page, ça fonctionne ?

Bonjour et bienvenue !

Tout d’abord, je t’invite à ajouter html après les trois accents graves ouvrant: Exemple: ```html. Essaie aussi de diviser les deux pages en deux blocs différents ^^ .

Concernant les deux pages, la différence entre les deux est l’absence des scripts dans les pages autres que l’accueil. Je parle de ces lignes :

<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

Si tu ajoutes ces deux lignes à la deuxième page, ça fonctionne ?

Helmasaur

Merci beaucoup à toi ça fonctionne je te remercie

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte