comment faire une barre de navigation qui descend

[xBorwniies]

Bonjour j'aimerais faire une barre de naviguation qui descend comme ceci:
http://horirozari.rpgdynasty.com/

Pas comme elle qui reste fixe:
http://justgraph.forumgratuit.org/

[SoraNoHime]

Bonsoir

Je vous invite à lire ce tutoriel : https://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum?highlight=navigation

Cordialement.

[Lixyr]

Bonsoir.

C'est gentil de prendre mon forum en exemple.
C'est une barre fixe.
Pour faire ça il faut déjà mettre la barre de navigation en haut du forum. Je vous laisse regarder ce tuto : https://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum

une fois ceci fait, prévenez-moi du résultat, et j'aiguillerai pour la suite.


Cordialement.


(edit : youp, Macema. Bienvenue. xD Je prends le sujet comme mon forum est en exemple >> )

[SoraNoHime]

^^ ok Lixyr

[xBorwniies]

Merci ça marche presque enfaite la barre est en haut mais ne bouge pas elle ne coullisse pas :/

[Lixyr]

C'est normal.

Donc, maintenant on va rajouter une div autour de la variable correspondant à la barre de navigation.

Donc, dans le template overall_header, on repère :

{GENERATED_NAV_BAR}

on l'entoure d'une div, avec une classe qui serait, par exemple : navfixe.

comme ceci :

<div class="navfixe">{GENERATED_NAV_BAR}</div>

enregistrez le template.

Ensuite, dans votre feuille css, vous rajoutez ceci :

Code:

.navfixe {
width: 90%;
height:20px;
position: fixed;
z-index: 999;
left:50px;
}

vous pouvez modifier la valeur :
width: => largeur de la barre de navigation
height: => hauteur de la barre de navigation
left: => espacement entre le bord gauche de votre écran et la barre de navigation


le reste du code vous n'y touchez pas.
position: fixed; => permet d'avoir la barre fixée par rapport à l'écran, donc le reste défile, mais la barre est fixée, donc ne bouge plus
z-index: 999; => permet d'avoir le maximum de contenu visible


et au pire, si ça ne marche pas, rajoutez ceci dans votre css :

Code:

.mainmenu {width: 100%;}

pour que la barre de navigation prenne toute la place. C'est le code de base.



Et avec tout ceci, tout devrait marcher comme sur des roulettes.

[xBorwniies]

Sa ne marche pas avec:

Code:

<div class="navfixe">{GENERATED_NAV_BAR}</div>

Mais sinon sa ne peut pas marche avec:

Code:

<div class="navig">{GENERATED_NAV_BAR}</div>

[Lixyr]

Essayez navig, c'est celui que j'ai aussi.

[xBorwniies]

Merci

[SandyL]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif