Welcome

Halloween Header & Navigation

Navigation fixe

Halloween, LS codage Forumactif Templates & Eléments Header & Navigation Navigation fixe

Invision

Optimisé Le logo de gauche peut être remplacé par le logo du forum. A droite se trouvent un bouton pour rejoindre le discord du forum ainsi que des liens rapides au survol du "Liens utiles"

Retour

Codage navigation fixe Halloween Forumactif

Dans le template OVERALL_HEADER, remplacez (lignes 265 à 269)

Par

<div id="navigation">
   <img src="https://i.imgur.com/CrEIl5d.png" alt="Logo NOM DU FORUM" id="logo_forum" /> 
   {GENERATED_NAV_BAR}
   <div id="nav_droite">
           <div class="infobulle">Liens utiles
     <div>
         <div class="fleche">
                         </div>
         <div class="bouh">
                                   <p>
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a><br />
                                           <span class="symbole_titre">▷</span> <a href="#">Lien</a>
                                   </p> 
         </div>
     </div>
 </div>
          
           <a href="#"><img id="discord" src="https://img11.hostingpics.net/pics/614210discord.png" alt="Discord NOM DU FORUM" /></a>
   </div>
</div>

Pour ajouter la police "Heebo" (facultatif), insérez la ligne suivante dans le template avant "{T_HEAD_STYLESHEET}" :

CSS

/********************* NAVIGATION *********************/
a {
    text-decoration: none !important;
}

#navigation {
    width: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    left: 0;
    padding: 18px 0;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Heebo', sans-serif;
}

#navigation a {
    transform: all;
    transition: 0.8s;
}

a.mainmenu {
    color: #fff;
}

#navigation a:hover {
    color: #37cb99 !important;
    transform: all;
    transition: 0.8s;
}

#logo_forum {
    width: 40px;
    margin-left: 2%;
}

#nav_droite {
    float: right;
}

.infobulle {
    display: inline-block;
    margin-right: 15px;
}

.infobulle > div {
    position: absolute;
    margin-left: -3.5%;
    opacity: 0;
    visibility: hidden;
    transform: all;
    transition: 1s;
}

.infobulle:hover > div {
    opacity: 1;
    visibility: visible;
    transform: all;
    transition: 1s;
}

.bouh {
    width: 200px;
    padding: 5%;
    margin: auto;
    background: #2c2c2c;
    color: #fff;
    text-align: left;
    text-transform: none;
}

.bouh a {
    margin: 5% 0;
    color: white;
}

.fleche {
    width: 0;
    margin-left: 50%;
    border: 5px solid transparent;
    border-bottom: 10px solid #2c2c2c;
}

La taille du logo s'adapte automatiquement via le code (#logo_forum). Les liens à modifier sont remplacés par des "#".

Dernière modification : 25 April 2020 23 : 33.

#navigationfixe #navigation #forumactif #codage #libreservice

Halloween