Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fusionner la navbar avec des particules ?

Sujet résolu
9 février 2020 à 13:12:39

Bonjour,

J'aimerais pouvoir mettre des particles sur ma navbar comme sur ce site : https://www.celestiam.fr/

J'ai mes deux éléments qui sont "particles-js" et mon "header" le truck c'est que j'arrive pas à mettre les deux en même temps  c'est soit l'un soit l'autre et je ne sais pas comment les fusionner ->

j'ai besoin de votre aide pour pouvoir fusionner les deux, étant débutant en html/css je n'ai pas encore toutes les lignes en tete

voici mon code html complet :

<!DOCTYPE html>
<html>

<!-- head -->
<head>
    <meta charset="utf-8">
    <title>My portfolio</title>

    <!-- CSS-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="src/css/main.css">
    <!-- CSS-->

    <!-- FONT -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/35ec9e22f4.js" crossorigin="anonymous"></script>
    <!-- FONT -->
</head>
<!-- head -->

<!-- body -->
<body>
    <!-- header -->
    <div class="block">
        <header class="header">
            <a href="#" class="header-logo">My portfolio</a>
            <nav class="header-menu">
                <a href="#"><i class="fas fa-home"></i> Acceuil</a>
                <a href="#"><i class="far fa-question-circle"></i> A propos</a>
                <a href="#"><i class="fas fa-align-justify"></i> Mes travaux</a>
                <a href="#"><i class="fas fa-envelope"></i> Contact</a>
                
            </nav>
        </header>
    </div>

    <!-- header -->

        <!-- Particles -->
        <div id="particles-js" class=""></div>

        <script src="src/part/particles.js"></script>
        <script src="src/part/app.js"></script>
        <script src="src/part/particles.min.js"></script>
        <!-- Particles -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="src/js/main.js"></script>
</body>
<!-- body -->
</html>

je vous remercie, je cherche depuis hier soir mais sans succès :/

Merci à vous

  • Partager sur Facebook
  • Partager sur Twitter
10 février 2020 à 11:30:50

Slt, serrait il possible que tu nous fournisse ton css, ta div  -> "id="particles-js"" c'est bien la ou tes particules apparaissent donc si tu met justement ce id=particles-js dans ton header comme ceci -> 
<header class="header" id="particles-js">
            <a href="#" class="header-logo">My portfolio</a>
            <nav class="header-menu">
                <a href="#"><i class="fas fa-home"></i> Acceuil</a>
                <a href="#"><i class="far fa-question-circle"></i> A propos</a>
                <a href="#"><i class="fas fa-align-justify"></i> Mes travaux</a>
                <a href="#"><i class="fas fa-envelope"></i> Contact</a>
                 
            </nav>
        </header>





-
Edité par SwenDeBentzmann 10 février 2020 à 11:32:34

  • Partager sur Facebook
  • Partager sur Twitter
10 février 2020 à 22:19:40

coucou,

ducoup j'ai trouvé la solution je vais lock le sujet,

J'ai donc fait ma partie particules en background et j'ai ensuite placer les bouttons de ma navbar avec un fond transparent ça marche,

merci !

  • Partager sur Facebook
  • Partager sur Twitter