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

3 participants

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 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
Maldan

Maldan
**

Messages : 55
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 Ven 13 Oct 2017 - 15:37

Question intéressante Smile
Admin'R

Admin'R
****

Messages : 359
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 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 !
Maldan

Maldan
**

Messages : 55
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◦ 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.
◦Jay◦

◦Jay◦
Membre actif

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

https://forum.forumactif.com
◦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 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 !
Maldan

Maldan
**

Messages : 55
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◦ 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.
◦Jay◦

◦Jay◦
Membre actif

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

https://forum.forumactif.com
◦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 Dim 15 Oct 2017 - 17:34

Merci beaucoup, le code fonctionne ! cheers

Maldan

Maldan
**

Messages : 55
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

- Sujets similaires

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