[ModernBB] Déplacer la barre de navigation et la rendre figée en dessous du logo du forum

[Maldan]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 12/10/2017
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, je suis à la recherche d'une âme généreuse pouvant me résoudre un petit souci que je rencontre aujourd'hui ; par quel moyen puis-je déplacer la barre de navigation sous le logo pour le rendre fixe avec le logo lui-même ?

Cordialement !

[Admin'R]

Question intéressante

[Maldan]

Bonsoir ! Je n'ai toujours pas de réponse alors je viens donner un peu plus de précisions sur ce que je souhaite faire.

J'aimerais déplacer la barre de navigation et la rendre fixe en dessous du logo du forum, comme il a été fait sur ce forum :
http://hbsfifa.boum.tv/

Cordialement !

[◦Jay◦]

Bonjour Maldan, dans votre template overall_footer_end recherchez et supprimez :

Code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   $(window).scroll(function() {
      var header_top = $('#headerbar-top');

      if (header_top.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      }
   });
});
//]]>
</script>

Pensez à enregistrer et surtout à publier.

Dans votre template overall_header, recherchez :

Code:

<div id="page-header">
      <div class="headerbar">
         <div id="headerbar-top">
            <div class="wrap">
               <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

               <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
                  <li>{GENERATED_NAV_BAR}</li>
               </ul>
            </div>
         </div>

         <div class="wrap">
            <div id="site-desc">
               <!-- BEGIN switch_h1 -->
                  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
               <!-- END switch_h1 -->
               <!-- BEGIN switch_desc -->
                  <p>{switch_desc.SITE_DESCRIPTION}</p>
               <!-- END switch_desc -->
            </div>
         </div>
      </div>

Remplacez par :

Code:

<div id="page-header">
      <div class="headerbar">
         <div id="headerbar-top">
            <div class="wrap">
               <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            </div>
         </div>

         <div class="wrap">
            <div id="site-desc">
               <!-- BEGIN switch_h1 -->
                  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
               <!-- END switch_h1 -->
               <!-- BEGIN switch_desc -->
                  <p>{switch_desc.SITE_DESCRIPTION}</p>
               <!-- END switch_desc -->
            </div>
         </div>
      </div>
          <div id="barrenavig">
  <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
                  <li>{GENERATED_NAV_BAR}</li>
               </ul>
          </div>

Pensez à enregistrer puis publiez.

Ensuite, il faudra ajouter un peu de CSS :

Code:

#barrenavig{background-color:#3d3d3d;
}
.navbar li{margin:0px;
padding:5px 0 5px 0;}
.navbar{text-align:center;}

Le code CSS correspond à la couleur de la barre, vous pouvez changer cette couleur #3d3d3d

Bien à vous.

[Maldan]

Formidable ! Merci mille fois Jay !

Une dernière question, que faut-il écrire dans le css pour modifier la couleur du survol de la barre de navigation quand on passe la souris dessus ? La couleur du fond du bouton et de son texte ?

Cordialement !

[◦Jay◦]

De rien, pour changer la couleur au survol de la souris :

Code:

.navbar a:hover {
    background-color: #FF0000;
    color: #000;
}

background-color: #FF0000; = couleur du fond
color: #000; = couleur de la police d'écriture

Bien à vous.

[Maldan]

Merci beaucoup, le code fonctionne !