Problème navbar en "position: fixed" par dualGCS - page 1

Bonjour à tous,

J'ai un petit problème sur ma navbar, je voudrais quelle reste fixed au scroll mais le problème c'est que quand je lui met "position: fixed" la navbar disparaît complètement et je comprend pas pourquoi.

C'est une navbar bootstrap 4 alors en class je lui attribut "fixed-top" sa marche pas non plus elle est pas fix.

Pouvez vous m'aidez a comprendre se phénomène s'il vous plait ?

Voici mon code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Site Portfolio GM</title>

        <!-- BOOTSTRAP CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

        <!-- OTHERS CSS -->
        <link href="https://fonts.googleapis.com/css?family=Oswald|Teko" rel="stylesheet">
        <link rel="stylesheet" href="css/lightbox.css">
        <link rel="stylesheet" href="css/hover.css">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <!-- PARTICLE.JS BACKGROUND -->
    <div id="particles-js">
    </div>

    <div class="ptext">
        <p>Hello, I'm <span class="gm">Grégory Moulinneuf</span>.</p>
        <br>
        <p>I'm a future DIMI.</p>
        <br>
        <a href="#" class="btn">View my work</a>
    </div>

    <body>

        <!-- HEADER -->
        <header>

            <!-- NAVBAR -->
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link navhome" href="#">HOME<span class="sr-only"></span></a>
                        <a class="nav-item nav-link" href="#">WORK</a>
                        <a class="nav-item nav-link" href="#">ABOUT</a>
                        <a class="nav-item nav-link" href="#">CONTACT</a>
                    </div>
                </div>
            </nav>

        </header>

        <!-- WORK -->
        <section class="work">
            <div class="container-fluid">

                <div class="row no-padding">
                    <figure class="col-lg-6">
                        <a href="images/Work1.jpg" alt="Affiche Hip Hop 2K19" data-lightbox="work" data-title="">
                            <img class="picture" src="images/Work1.3.jpg" alt="Lil Pump" onmouseover="this.src='images/Work1.2.jpg'" onmouseout="this.src='images/Work1.3.jpg'"> 
                        </a>
                    </figure>
                </div>  

            </div>
        </section>

        <!-- CONTACT -->
        <section class="contact">
            <div class="container">
                
                <fieldset class="exemple">
                    <form>

                        <div class="form-group row">
                            <label for="example-text-input-nom" class="col-2 col-form-label">Nom</label>
                            <div class="col-10">
                                <input class="form-control" type="text" value="" id="example-text-input-nom">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="example-text-input-prenom" class="col-2 col-form-label">Prénom</label>
                            <div class="col-10">
                                <input class="form-control" type="text" value="" id="example-text-input-prenom">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="example-email-input" class="col-2 col-form-label">Email</label>
                            <div class="col-10">
                                <input class="form-control" type="email" value="" id="example-email-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="select-sujet" class="col-2 col-form-label">Sujet</label>
                            <div class="col-10">
                                <select class="form-control" id="select-sujet">
                                    <option>Infos sur les projets</option>
                                    <option>Autre</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="textarea-message" class="col-2 col-form-label">Message</label>
                            <div class="col-10">
                                <textarea class="form-control" id="textarea-message" rows="10"></textarea>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-10 offset-2 text-center">
                                <a href="#" class="btn2">Envoyer</a>
                            </div>
                        </div>

                    </form>
                </fieldset>

            </div>
        </section>

        <!-- OPTIONAL JavaScript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript" src="js/lightbox.min.js"></script>
        <script type="text/javascript" src="js/particles.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

    </body>
</html>

/* CSS GENERAL */
body {
    font-family: 'Teko', sans-serif;
    position: relative;
}

.no-padding [class^=col] {
    padding: 0;
}

/* HOME */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background: #343434;
}

#particles-js > canvas {
    width: 100%;
    height: 100%;
}

.ptext {
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    line-height: 0.4em;
    font-size: 60px;
}

.gm {
    color: #009c8f
}

.btn {
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
    border: #fff 1px solid;
    padding: 0 17px;
    border-radius: 10px;
    line-height: 2em;
    font-size: 32px;
    transition-property: color, border;
    transition-duration: 0.3s;
}

.btn:hover {
    color: #fa5d4a;
    border: 1px solid #009c8f;
}

/* NAVBAR */
.navbar{
    padding-left: 120px;
    margin: 0;
    background-color: #262626!important;
    border-bottom: 2px solid #fa5d4a;
}

.nav-link {
    font-size: 16px;
    color: #ffffff!important;
    padding: 0;
    margin: auto 30px auto 0;
    transition-property: color;
    transition-duration: 0.2s;
}

.nav-link:hover{
    color: #009c8f!important;
}

.navbar-toggler {
    border-color: #fa5d4a!important;
    transition-property: border-color;
    transition-duration: 0.7s;
}

.navbar-toggler:hover {
    border-color: #009c8f!important;
}

/* 3 bard */
.navbar-toggler .icon-bar {
    background-color: #fff!imporant;
}

/* NAVBAR RESPONSIVE */
@media (max-width: 992px) {

    .navbar {
        padding: 10px 10px 10px 15px;
    }

    .navhome {
        margin-top: 15px!important;
    }

    .nav-link {
        font-size: 19px;
        text-align: center;
        margin: 5px;
    }
}

/* WORK */

.work {
}

.work figure img {
    height: auto;
    max-width: 100%;
}

/* CONTACT */
.contact {
    background-color: #343434;
}

form {
    margin-top: 50px;
    margin-bottom: 30px;
}

.contact form label {
    padding-left: 40px;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.75rem;
    color: #fff;
}

.contact input {
    color: #343434!important;
    border: 2px solid #fa5d4a;
}

.contact select {
    color: #343434!important;
    border: 2px solid #fa5d4a;
}

.contact textarea {
    color: #343434!important;
    border: 2px solid #fa5d4a;
}


.btn2 {
    margin-top: 5px;
    color: #fff;
    text-decoration: none;
    border: #fff 1px solid;
    padding: 0 17px;
    border-radius: 10px;
    line-height: 2em;
    font-size: 32px;
    transition-property: color, border;
    transition-duration: 0.3s;
}

.btn2:hover {
    text-decoration: none;
    color: #fa5d4a;
    border: 1px solid #009c8f;
}

Je vous remercie d'avance !

Bonne journée,

Greg.

dualGCS

24 mai 2018 à 14:41:41

Ruynix

24 mai 2018 à 15:04:41

Salut,

Tout d'abord enlève la classe "navbar-fixed-top".

Ensuite fait ça :

.navbar {
   position: fixed;
}

Ton menu est bien fixe mais il est en arrière plan ! C'est pout ça que tu ne le vois pas !

Règle le problème avec ça :

body {
   z-index: 1;
}

.navbar {
   position: fixed;
   z-index: 2;
}

24 mai 2018 à 16:29:57

Merci de ta réponse Ruynix,

Le problème persiste la navbar disparais

25 mai 2018 à 8:54:49

Tu dois avoir des conflits avec tes autres feuilles CSS car je les ai pas et ça marche bien de mon côté..

26 mai 2018 à 15:49:16

Y'a t'il une autre solution ?

-
Edité par dualGCS 26 mai 2018 à 16:36:08

Yo123456

26 mai 2018 à 17:37:20

Dans bootstrap 4, la navbar fixe est bien fixed-top (et non pas navbar-fixed-top)
https://getbootstrap.com/docs/4.1/components/navbar/#placement

ça fonctionne très bien (avec ton code où j'ai juste remplacé navbar-fixed-top) :

https://codepen.io/anon/pen/PeMmje

pilot26

6 janvier 2019 à 22:29:53

Ici tu as un tuto sur la positon fixe d'une navbar avec la version 4 de bootstrap : https://www.booglit.com/bootstrap-4-barre-de-navigation-partie-2/

Ça pourra peut être t'aider.

-
Edité par pilot26 6 janvier 2019 à 22:32:11

Problème navbar en "position: fixed"

Problème navbar en "position: fixed"

Supprimer

Modérer

Signaler le message aux modérateurs