Menu statique en HTML / CSS lors du défilement vers le bas ?

Question

Comment puis-je faire en sorte que le menu horizontal et principal de ma page web ne soit pas déplacé en faisant défiler le contenu de la page? Je pense que cela devrait se faire avec la balise position: fixed pour qu'il reste statique et ne change pas quelle que soit les dimensions du corps de la page mais je n'y arrive pas.

Le menu en question est celui-ci et donc reste avec son CSS respectif du menu qui est le suivant :

#menu ul
{   margin: 0px;
    padding: 0px;
}

#menu ul li{
    list-style: none;
    display: inline-block;
    padding: 25px 8px;
    margin-right: 60px;
    margin-left: 60px;
}

#menu ul li a{
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 25px 8px;
}

#menu ul li a:hover{
    background-color: #91B0AF;
    color: #000;
    font-weight: bold;
    padding: 25px 8px;
}

Si je mets la position fixe dans la div complète du menu, ça donne ça, ça se décale en fonction de l'image d'arrière-plan et c'est aligné à gauche : S

Merci !!

Answer 1

Ajoutez les styles ci-dessous pour compléter la division du menu principal.

position:fixed;
left:0;
top:0;
right:0;
text-align:center;

Ce code fonctionne pour vous. Essayez-le. Faites-moi savoir s'il y a un problème.

Answer 2

Donc si vous voulez le cacher, cela signifie que lorsque vous faites défiler la page, vous voulez qu'il se déplace avec la page. Si c'est le cas, vous pouvez utiliser

     position: relative;
     width: 100%;
     top: 0;

mais si vous voulez le fixer, essayez d'appliquer ce code sur #menu. Je suppose que c'est un élément div.

     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;

si cela ne fonctionne pas, partagez une capture d'écran pour que nous puissions vérifier exactement quel est le problème.

Answer 3

$(window).scroll(function() {
    if ($(this).scrollTop() >= 100) { // cela fait référence à la fenêtre
        position:fixed;
    }
});

Answer 4

$(window).scroll(function () {
    var y = $(window).scrollTop();
    if (y > 0) {
        $('#header').addClass('fixedPosition');
    } else {
        $('#header').removeClass('fixedPosition');

    }
});

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.home {
    min-height:400px;
}
#header-center {
    margin: 0 auto;
}
#header {
    height: 80px;
    background-color: #E0E0E1;
    color: #FFF;
    position: relative;
    width: 100%;
    z-index: 9999;
}
#header p {
    color: #FFF;
}
#header h1 {
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 0;
}
#header h1 a {
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
}
#header h1 a:hover {
    color: #FFF;
}

ul {
  margin:0 auto;
  display: flex;
  justify-content: center;
}
ul li {
    float: left;
    list-style:none;
}
ul li a {
    font-size: 20px;
    color: #FFF;
    margin: 0px;
    padding: 10px;
    text-decoration: none;
    float: left;
}

.fixedPosition {
    position:fixed !important;
    top: 0;
    left: 0;
    right:0;
    width:100%;
    text-align:center;
}

          HOME
          WORKS
          ABOUT
          CONTACT

    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu
    contenu

Essayez cela. Vérifiez s'il correspond à vos exigences.