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

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

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

Message par Maldan le Jeu 12 Oct 2017 - 19:55

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 ! Smile


Dernière édition par Maldan le Dim 15 Oct 2017 - 15:17, édité 1 fois
avatar

Maldan
**

Messages : 54
Inscrit(e) le : 06/04/2017

http://www.havrefiel.com
Maldan a été remercié(e) par l'auteur de ce sujet.

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

Message par Admin'R le Ven 13 Oct 2017 - 15:37

Question intéressante Smile
avatar

Admin'R
****

Messages : 321
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

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

Message par Maldan le Dim 15 Oct 2017 - 1:41

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 !
avatar

Maldan
**

Messages : 54
Inscrit(e) le : 06/04/2017

http://www.havrefiel.com
Maldan a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par ◦Jay◦ le Dim 15 Oct 2017 - 9:24

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.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3823
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

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

Message par Maldan le Dim 15 Oct 2017 - 15:15

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 !
avatar

Maldan
**

Messages : 54
Inscrit(e) le : 06/04/2017

http://www.havrefiel.com
Maldan a été remercié(e) par l'auteur de ce sujet.

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

Message par ◦Jay◦ le Dim 15 Oct 2017 - 15:22

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.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3823
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

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

Message par Maldan le Dim 15 Oct 2017 - 17:34

Merci beaucoup, le code fonctionne ! cheers

avatar

Maldan
**

Messages : 54
Inscrit(e) le : 06/04/2017

http://www.havrefiel.com
Maldan a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum