Fixe CSS Barre de Navigation

Récemment j'ai résolu un problème qui a été me tracasse depuis un moment avec mon CSS Barre de Navigation. Maintenant j'ai le problème de la fixation vers le haut pour qu'elle défile vers le bas lorsque vous faites défiler la page. Je sais que la chose que j'ai besoin d'ajouter de la Position: fixed; mais je ne sais pas où ajouter.

Mes dernières tentatives abouti dans le texte en cours de correction, mais l'arrière-plan de la barre de navigation ne serait pas. Toute aide est grandement appréciée.

Mon CSS

#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu > ul {
display:table;
margin:0 auto;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
text-align: center;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
Avec votre css, il est vraiment difficile de vous aider. Veuillez poster du html. Il serait encore mieux si vous créez un jsfiddle!
Essayer un peu à l'aide d'un navigateur inspecteur de code (firebug, etc).

OriginalL'auteur user2957819 | 2013-11-05

  1. 6

    Vous devez l'ajouter à l'ensemble de conteneurs de toutes vos nav éléments, à partir de votre css fichier, je suppose que c'est le DOM élément avec id="cssmenu". Vous voudrez également vous ajoutez top: 0px; ainsi pour s'assurer qu'il reste sur la position 0.

    MODIFIER:

    css:

    #my-nav-bar {
position: fixed;
top: 0px;
}

    html:

    <body>
<div id="my-nav-bar">
<!-- nav bar content -->
</div>
<!-- page content -->
</body>

    Maintenant la div avec id="my-nav-bar" reste fixe en haut de la fenêtre.

    Voir ce JSFiddle Exemple je viens de faire

    Je ne sais pas trop comment je vais, je ne suis pas vraiment avancé avec Css encore O. o
    J'ai fait un montage avec un exemple.
    Les deux réponses semblent fonctionner à merveille, mais maintenant ma Navbar est passé à 50% de la largeur O. o
    essayez d'ajouter width: 100%, doit s'assurer qu'il remplit l'ensemble de la partie supérieure. Voir le JSFiddle j'ai ajouté à la réponse.
    Je ne savais pas que je l'avais mis sur l'Auto, Merci man 😀

    OriginalL'auteur Farmer Joe

  2. 0

    Je suppose que vous #cssmenu est votre principal nav conteneur, peut-être donner un essai sur 

        #cssmenu {
position: absolute;   
}
    position:fixed; il serait plus approprié de répondre parce qu'il veut maintenir fixe pendant le défilement.

    OriginalL'auteur ElvinD