Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Fixer la barre de navigation en haut du blog Blogger

Vous avez créé votre barre de navigation, vous l'avez personnalisé, et vous lui avez peut-être même ajouté des menus déroulants.
Aujourd'hui je vous propose d'aller encore plus loin et de fixer votre menu en haut de votre blog. Il sera toujours visible même en descendant la page web ! C'est pas cool ça ? :)

Fixer la barre de navigation en haut du blog Blogger

Allez hop, c'est parti pour les explications ;)



Introduction

Avant de commencer je précise que ce tutoriel est totalement indépendant du dernier tutoriel qui expliquait comment simplement déplacer sa barre de navigation au dessus du titre du blog.
De plus, je considère que vous avez suivi les premiers tutos pour créer et personnaliser votre barre de navigation. Si ce n'est pas le cas je vous conseil de les lire ;)

Fixer la barre de navigation en haut du blog Blogger


Sauvegarde du blog

Avant de commencer, faites une sauvegarde du visuel de votre blog. Ceci est important si vous faites une erreur : vous pourrez facilement revenir en arrière et recommencer ;)

Cliquez sur Modèle à partir de votre tableau de bord. Cliquez ensuite sur Sauvegarder/Restaurer en haut à droite de l'écran, puis sur Télécharger le modèle complet :

Fixer la barre de navigation en haut du blog Blogger


Modifier le code CSS

Une fois que vous avez sauvegardé le fichier sur votre ordinateur, cliquez sur Modifier le code HTML :

Fixer la barre de navigation en haut du blog Blogger

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

Fixer la barre de navigation en haut du blog Blogger

Si vous ne le trouvez pas, c'est que cette partie est déjà ouverte. Passez à l'étape suivante.

Cliquez maintenant n'importe où dans la boîte de code et appuyez en même temps sur Ctrl et F. Une boîte de recherche apparaît en haut à droite de la boîte de code. Tapez ceci, et appuyez sur Entrer :
/* Content
Vous devriez tomber sur le code suivant :

Fixer la barre de navigation en haut du blog Blogger

Ajoutez les codes suivants :
/* Fixer la barre de navigation en haut du blog */

.tabs-outer {
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 9999;
}

.region-inner.tabs-inner {
padding: 0;
}

#crosscol {
margin: 0;
}
Juste en dessous de */, comme ceci :

Fixer la barre de navigation en haut du blog Blogger

Cherchez maintenant de la même manière le code suivant :
.main-outer {
Vous devriez tomber sur le code suivant :

Fixer la barre de navigation en haut du blog Blogger

Ajoutez la ligne suivante avant le signe } :
margin-top: 40px;
Comme ceci :
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
margin-top: 40px;   /* Espace en-dessous du titre du blog */
}
Cette ligne représente l'espace en-dessous du titre du blog. Changez la valeur 40 pixels (40px) pour changer cet espace :)

Cherchez maintenant le code suivant :
.content-inner {
Vous devriez tomber sur ceci :

Fixer la barre de navigation en haut du blog Blogger

Ajoutez la ligne suivante avant le signe } :
margin-top: 80px;
Comme ceci :
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
margin-top: 80px;   /* Espace au-dessus du titre du blog */
}
Cette ligne définit l'espace au-dessus du titre du blog. Diminuez ou augmentez la valeur en pixels comme vous le souhaitez :)

Sauvegardez. On obtient :

Fixer la barre de navigation en haut du blog Blogger

Vous verrez qu'en descendant la page web la barre de navigation restera toujours affichée en haut de l'écran ;)

Et voilà pour ce tutoriel. Bon blogging !

Autres articles

280 commentaires:

  1. Bonjour,
    Merci pour tous ces tutoriels. Est ce que tu sais comment faire sous blogspot une page d'accueil fixe comme sur un site ?
    Merci d'avance de ta réponse :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ajoute l'idée à ma liste de tutoriels ;)

      Supprimer
  2. Coucou, j'ai un problème (visiblement, j'en ai toujours !), le titre de mon blog bouge en même temps que mon menu

    Angéla de thenailartzone.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Salut Angéla,

      Bizarrement le titre de ton blog ne se trouve pas dans ton en-tête. Du coup il te faut utiliser les codes suivants à la place :

      Ajoutes les codes suivant après /* Content
      ----------------------------------------------- */ :

      /* Pour fixer le menu en haut du blog */
      #HTML1 {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0;
      }

      .tabs-outer {
      margin-top: 20px; /* Espace au-dessus du titre */
      margin-bottom: 20px; /* Espace en-dessous du titre */
      }

      Ensuite cherches le code suivant :

      .tabs-inner .widget ul {

      Tu devrais trouver :

      .tabs-inner .widget ul {
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: none;
      border-bottom-color: #000000;
      border-bottom-width: 3px;
      border-top: none;
      border-top-color: #000000;
      border-top-width: 3px;
      background: none;
      text-align: center;
      }

      Changes les 2 premières lignes pour :

      padding-top: 10px;
      padding-bottom: 10px;

      Comme ceci :

      .tabs-inner .widget ul {
      padding-top: 10px; /* Espace au-dessus des liens du menu */
      padding-bottom: 10px; /* Espace en-dessous des liens du menu */
      border-bottom: none;
      border-bottom-color: #000000;
      border-bottom-width: 3px;
      border-top: none;
      border-top-color: #000000;
      border-top-width: 3px;
      background: none;
      text-align: center;
      }

      Et voilà ça devrait régler le problème :)

      Supprimer
    2. Sauf que maintenant, j'ai l'impression que le menu n'est pas centré (après ce n'est qu'une impression vu que mon ordi est bizarre et décale tout)

      Supprimer
    3. Rajoutes le code suivant :

      .tabs-inner .widget li:last-child a {
      margin-right: 0;
      }

      Ça supprimera l'espace à droite du dernier lien de ton menu. C'est pour ça que ton menu ne semble pas centré ;)

      Supprimer
    4. Oooh merci merci !! Mais qu'est ce que je ferais sans toi ?? (probablement pas grand chose !)

      Supprimer
    5. Bonsoir ! Personnellement quand j'ajoute le code :

      .tabs-inner .widget li:last-child a {
      margin-right: 0;
      }

      Ça ne marche pas, je ne sais pas si je l'ai pas bien placé :(

      L'adresse de mon blog : http://kimmiesway.blogspot.fr/

      Supprimer
    6. Bonsoir Kim,
      J'ai regardé ton blog. C'est normal que le code ne change rien car ton menu est déjà bien centré ;)

      Supprimer
  3. Bonsoir,
    J'ai (encore un soucis). J'ai bien appliquer les paramètres et vérifié mais la barre ne reste pas fixée. Comment faire?
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Laëtitia,
      Peux-tu m'envoyer l'adresse de ton blog pour que je puisse y jeter un oeil ?

      Supprimer
  4. Merci encore ! De mon côté, j'aimerais que mon menu soit dans un plus grand espace blanc, de façon à ce qu'en scrollant, il n'y ait pas un bout au dessus du menu où on voit la page monter... J'ai du mal à être claire, mais si tu peux jeter un oeil, tu comprendras ! http://lapenderiedelucie.blogspot.fr

    merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Cherches ton code suivant :

      .tabs-inner .widget ul {
      margin-top: 20px;
      margin-bottom: 20px;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 2px;
      border-top: none;
      border-top-color: #96CA2D;
      border-top-width: 1px;
      background: #FFFFFF;
      }

      Et remplace-le par celui-ci :

      .tabs-inner .widget ul {
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: none;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 2px;
      border-top: none;
      border-top-color: #96CA2D;
      border-top-width: 1px;
      background: #FFFFFF;
      margin-top: -30px;
      }

      J'ai remplacé "margin" des 2 premières lignes par "padding" et ajouté "margin-top: -30px" à la fin pour décaler le menu vers le haut de la page :)
      Et voilà ! ;)

      Supprimer
    2. Merci beaucoup !!! Est-ce normal que du côté gauche et droit la barre de menu soit "courte" et qu'on voit le blog en scrollant ? :s

      Désolée pour toutes ces questions... En tout cas, ton blog est une pépite, je vais pouvoir refaire ce que je veux faire depuis tellement de temps ! :)

      Supprimer
  5. Bonjour, j'ai essayé de faire ce tuto mais mon menu disparait.. Mes codes sont déjà modifiés pour une personnalisation de mon blog et du coup, je ne retrouve pas tout comme chez toi..
    Merci pour tes réponses !

    RépondreSupprimer
    Réponses
    1. Bonjour Gwen,
      C'est très bizarre car ça devrait marcher. Vérifie bien que tu n'as pas oublié de ";", "{" ou "}". Un petit oubli ou une erreur de frappe est souvent la cause des problèmes :)

      Pour tes codes ce n'est pas grave si leur contenu n'est pas exactement pareil, tant que la première ligne l'est :

      .main-outer {

      et

      .content-inner {

      Supprimer
    2. Ok je vais regarder à ça :)

      Merci !

      Supprimer
  6. Bonsoir! ^^
    Alors moi j'ai un petit problème, j'aimerais que ma barre de navigation défile en même temps que je descende la page sauf que même si j'ai l'impression d'avoir tout fait comme tu l'as si bien expliqué, et bien elle ne défile pas!! ^^

    http://des4lem.blogspot.fr

    Merci d'avance!
    Kévin

    RépondreSupprimer
    Réponses
    1. Bonjour Kevin,

      le problème vient du fait que ta barre de navigation ne se trouve pas au bon endroit, au lieu se trouver dans l'emplacement prévu pour le menu elle se trouve dans l'espace prévu pour le titre de ton blog. Du coup les codes CSS ne correspondent pas :)

      Je peux te donner les codes pour ton menu, mais cette méthode fixera ton menu en haut de ton blog et supprimera l'espace au-dessus du menu... Si tu souhaites conserver l'espace au-dessus de ton menu, et faire en sorte que seule la partie des liens reste collé en haut du blog quand tu descends l'écran, alors il faudra utiliser du javascript.

      Que souhaites-tu faire ?

      Supprimer
  7. Tout d'abord milles mercis pour ta réponse! Et ensuite, je veux bien que tu me donne les codes pour le menu, au diable les espaces! :)

    RépondreSupprimer
    Réponses
    1. Pas de soucis, cherches le code suivant :

      div#barre_nav {
      margin-bottom: 0px;
      margin-top: -110px;
      }

      Et remplaces-le par :

      div#barre_nav {
      margin: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      }

      Puis cherches :

      #barre_nav ul {
      text-align: center;
      font-family: Oswald;
      background-color: #ffffff;
      padding: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: -40px;
      margin-right: -40px;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: dotted;
      border-color: #111111;
      border-width: 1px;
      }

      Et remplaces la ligne :

      padding: 0px;

      par :

      padding: 7px 0 0 0;

      Ensuite pour corriger l'espace entre le menu et le contenu du blog tu peux ajouter le code suivant en-dessous du précédent :

      .content {
      margin-top: -80px;
      }

      Changes la valeur -80px à ce qui te convient. Tu peux prévisualiser le changement avant de sauvegarder en cliquant sur "Prévisualiser le modèle" au-dessus de la boîte de code. Et voilà ! :)

      Supprimer
    2. Bonjouuuuuuuuuuur,

      Je n'arrive pas à trouver le code dont tu parles : div#barre_nav {
      margin-bottom: 0px;
      margin-top: -110px;
      }
      pour enlever les maudits espaces de ma barre de navigation :(
      J'aurais aimé savoir si tu pourrais m'aider ?

      Merci d'avance !
      ( Au passage, merci pour tous tes tutos.. Ils sont extras! ♥ )

      Supprimer
    3. Bonjour Julie,
      Peux-tu me donner le lien vers ton blog ? Car c'est souvent au cas par cas ^^

      Supprimer
  8. Olalah mais c'est niquel!! Franchement, un énorme merci, t'es la Queen de la customisation! Et j'en profite aussi pour dire que tes nombreux articles m'ont énormément aider! Encore milles fois merci!

    RépondreSupprimer
    Réponses
    1. Bonjour! :)
      Je reviens vers toi pour un dernier petit problème! Voilà, lorsque j'ajoute une image à mon en-tête, il y a systématiquement un petit "f" qui apparait juste à côté! Saurais-tu me dire pourquoi et comment le faire disparaitre??
      Merci milles fois!

      Kévin

      Supprimer
    2. Bonjour Kévin,
      As-tu réglé le problème ? Car je ne vois pas le f :/

      Supprimer
    3. Ouiiii j'ai finalement trouvé! C'était pas bien compliqué en faite ^^'
      Par contre j'ai un autre problème! Mes boutons de partagent ne s'affichent pas en dessous de mes articles alors que j'ai bien coché le bouton d'ajout dans la mise en page! Saurais-tu comment ça se fait et si il y a moyen de régler ce problème?

      Merci d'avance! :)
      Kévin

      Supprimer
    4. Vérifie qu'après la ligne :

      <!-- quickedit pencil -->

      Tu as le code suivant :

      <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
      <b:if cond='data:post.sharePostUrl'>
      <b:include data='post' name='shareButtons'/>
      </b:if>

      Il y aura surement cette ligne juste en-dessous aussi :

      </div> </div>

      Supprimer
    5. J'ai regardé et en dessous je n'ai que:


      Supprimer
    6. Ton code ne s'est pas affiché dans le commentaire. Essaye de me l'envoyer par e-mail en cliquant sur l'enveloppe dans la barre latérale.

      Supprimer
    7. Ah oui effectivement! Je viens de te l'envoyer par mail!

      Supprimer
  9. Re, encore une question décidemment je ne suis pas douée, je ne trouve pas forcement les mêmes codages html que toi avec la recherche peut-être ai je un soucis avec ma bannière c'est elle qui pose soucis??

    RépondreSupprimer
    Réponses
    1. C'est parce que tu utilises un autre thème de départ que moi, mais ce n'est pas grave ! Tant que la première ligne avec le signe { à la fin est la même, c'est bon :)

      Supprimer
  10. Bonjour,
    Merci pour ce tuto,
    J'ai normalement appliqué tout comme tu le dis, mais ma barre ne reste pas fixe en haut :/
    Sais-tu où il peut y avoir un souci ?
    Merci beaucoup,
    Bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour,

      C'est normal que ça ne marche pas, ton menu se trouve dans ton en-tête au lieu de se trouver dans l'emplacement prévu pour le menu. Mais pas de soucis, retrouves ce code :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Et remplaces-le par :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin-top: -14px !important;
      }

      Et voilà ça devrait régler le problème :)

      Supprimer
    2. Super Merci beaucoup je suis ravie !! ça fonctionne !! :-)
      En tout cas, ton blog m'a été d'une grande aide, vraiment merci :)

      Supprimer
  11. Merci encore pour ton article !! Ça m'a beaucoup aider!!!
    Par contre j'ai une autre question @:)
    Peut-on encore avoir un menu en dessous de la bannière en plus du menu d'en haut ?!
    Car dans la mise en page dans blogger, impossible d'essayer de caser un widget html en dessous de la bannière, pas de glisser possible =(
    Merci d'avance pour ta réponse :*
    Bonne journée !

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Oui ça devrait être possible. Des fois la case où l'on dépose le gadget à du mal à s'afficher. Essaye de passer sur la bannière plusieurs fois.

      Sinon tu peux l'ajouter manuellement en ajoutant le code HTML de ton 2e menu directement dans le code HTML de ton thème.
      Vas dans Modèle > Modifier le code HTML et cherches le code suivant :

      </header>

      Juste en-dessous de cette ligne insère le code HTML de ton 2e menu (celui qui sera sous la bannière).

      Supprimer
  12. Bonjour,

    Jai bien suivi ton toto, ma barre de navigation est bien fixée en haut, c'est top, mais par contre elle n'est pas centrée... Je n'arrive pas à le faire même en voyan la réponse que tu as donné plus haut. Tu sais ce que je peux faire ?
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est par ce que tu utilises le gadget pages.
      Pour centrer ton menu vas dans Modèle > Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Cliques ensuite n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît colles :

      /* Columns

      Et appuies sur entrer.

      Juste au-dessus de cette ligne colles ceci :

      #PageList1 {
      text-align: center;
      }

      .tabs .widget li, .tabs .widget li {
      float: none !important;
      display: inline-block;
      }

      Sauvegardes, et voilà ! ;)

      Supprimer
    2. Genial! Merci beaucoup vraiment! J'ai découvert ton blog vendredi et je ne le quitte plus jai envie de tout essayer :p.
      Par contre comme tu dis, j'ai fait mon menu avec un gadget pages, et ducoup quand je suis ton tuto sur comment mettre des images a la place des textes dans les onglets, ca ne marche pas non plus...
      En fait j'aimerai remplacer mes titres d'onglets "Facebook" "pinterest" "google+" et "mail" par les pictos de ces derniers. Tu as la combine ?
      Merci encore, en plus ta réponse a été hyper rapide!
      Laura

      Supprimer
    3. Bonjour Laura,
      Je ne crois pas que cela soit possible avec le gadget pages car on n'a pas accès à son code HTML. En utilisant un menu en HTML par contre, on peut ajouter facilement des images car on contrôle tout le code du menu. Du coup je te conseil de faire ton menu en HTML si tu souhaites absolument ajouter des images :)

      Supprimer
  13. Bonjour,

    Je reviens vers vous, pour une question différente de cet article, mais je n'arrive pas à trouver ma réponse autre part...
    Je souhaiterais mette une photo sur toute la largeur de mon blog, derrière le titre, mais elle n’apparait que sur la gauche, impossible d'agrandir la largeur, ou de la centrer...
    Auriez vous une solution?
    Merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Une solution serait d'ajouter une image en fond de ton blog (en plus de la couleur de fond) sans la répéter, et en ajustant sa position en haut du blog.
      Pour cela vas dans Modèle > Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Cliques ensuite n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît colles :

      body {

      Et appuies sur Entrer.
      Tu trouveras ce code plusieurs fois, on s'intéresse au 2e. Pour passer au 2e, cliques dans la boîte de recherche et appuies à nouveau sur Entrer.
      Tu devrais trouver ces 3 lignes :

      /* Content
      ----------------------------------------------- */
      body {

      Juste après la ligne body { colles :

      background-image: url('http://adresse.fr/image.png'); /* URL de l'image */
      background-repeat: no-repeat; /* Pas de répétition de l'image */
      background-position: 50% 0; /* Centré à 50% de la largeur et en haut (0) de la page */
      background-size: 100% auto; /* Largeur de l'image = 100% de la largeur de la page | Hauteur de l'image est proportionnelle (auto) */

      Remplaces http://adresse.fr/image.png par l'adresse url de ton image.
      D'après les commentaires entre /* et */, l'image sera centré, et fixé en haut de la page, elle fera 100% de la largeur de la page, et ne sera pas répétée.

      Sauvegardes, et voilà :)

      Supprimer
  14. Bonjour :) Nouvelle blogueuse, je suis en train de finaliser le design pour etre sure de savoir comment je me positionne et mettre en ligne mes articles qui n'attendent que ça :p J'ai suivi pas mal de tes tutos et ca fonctionne super bien alors déjà M.E.R.C.I ! Par contre celui-ci il ne veut pas... pourtant j'ai tout vérifié 4-5 fois ... je desespère ... si tu souhaites y jeter un oeil pour m'aider ce serait top :) : www.fancy-anays.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bizarrement ton menu n'est pas dans le contenant dans lequel il devrait être, c'est pour cela que ça ne fonctionne pas. Remplaces le code CSS suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Pour celui-ci :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      Et ça devrait fonctionner ;)

      Supprimer
    2. Parfait merci beaucoup (oui il s'agit de la même personne ^^)

      Supprimer
  15. Hello :)

    J'aurais une petite question pour toi :

    Mon menu est fixé en haut de mon blog et il descend en même temps que ma page quand on scroll, ce qui est très bien, mais j'aimerais plutôt que mon menu soit fixé sous mon en-tête (et qu'il descende quand même quand on scroll). Peux-tu m'aider ? Sachant que j'utilise le gadget "Pages".

    Merci d'avance !

    Cece

    RépondreSupprimer
    Réponses
    1. Bonjour Cece,
      Pour cela il faut replacer ton menu sous ta bannière et ajouter un code Javascript. Si tu le souhaites je peux le faire pour toi car je le propose dans mon pack à 20 € ;)

      Supprimer
  16. Salut ! Je souhaiterai utiliser ce tuto afin de fixer ma barre latérale moi, pour que quand on aille vers le bas elle reste en place. Est-ce possible ? Et comment m'y prendre ?

    RépondreSupprimer
    Réponses
    1. Bonjour Maë, il y a 2 possibilités :
      - Tu peux fixer ta barre latérale, un peu comme la barre de navigation, en haut du blog pour qu'elle reste toujours affichée quand tu descends la page. Cette méthode est très simple à réaliser car nécessite que quelques lignes de CSS.
      - Ou bien fixer la barre latérale une fois qu'on à passé ta bannière. Ici il va falloir rajouter du JavaScript au code CSS et l'adapter à ton blog, ce qui est plus compliqué à mettre en place.

      Par contre, si tu fixe ta barre latérale, on ne verra pas tout son contenu, car elle est très longue et dépassera de l'écran :/

      Supprimer
  17. Bonjour,
    je voulais savoir si tu savais comment faire pour fixer la barre en haut mais que quand on descend (je ne sais pas si tu me comprend)
    bonne fin d'après-midi

    RépondreSupprimer
    Réponses
    1. Bonjour, tu veux dire qu'elle reste fixée en haut du blog une fois que la page est descendue à son niveau ?
      C'est possible en ajoutant du JavaScript mais il faut l'adapter au blog au cas par cas. Du coup je peux te proposer de le faire par prestation si tu le souhaites. Si ça t'intéresse envoie-moi un mail ;)

      Supprimer
  18. Bonjour,

    Alors tout d'abord je voulais te dire merci pour tous ces précieux tutoriels, grâce à toi je suis en train de refaire presque tout !

    Par contre j'ai suivi celui ci pas à pas et j'ai un petit soucis, j'ai pas réussi à caler ma barre de menu vraiment en haut, j'ai donc un espace entre le haut et mon menu où l'on voit défiler le blog. Aurais tu une solution car j'ai beau tenter différentes choses, impossible d'y arriver? Mon blog : http://www.ninilachipie.com/

    Merci d'avance :) et bonne journée
    Nini

    RépondreSupprimer
    Réponses
    1. Bonjour Nini,

      Il y a une marge au-dessus de ton menu, mais ce n'est pas grave, tu peux essayer de remplacer le code CSS suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Pour celui-ci :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      Et ça devrait fonctionner ;)

      Supprimer
    2. Bonjour Catherine, merci infiniment pour ta réponse. Malheureusement j'ai toujours le même soucis :( bon dimanche, Nini

      Supprimer
    3. Tu as également un espace dans le code suivant :

      .tabs-inner .widget ul {
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
      margin-bottom: 0px;
      border-bottom: none;
      border-bottom-color: #A9D0F5;
      border-bottom-width: 10px;
      border-top: none;
      border-top-color: #A9D0F5;
      border-top-width: 10px;
      background: #A9D0F5;
      margin-top: 20px;
      }

      Remplaces-le par :

      .tabs-inner .widget ul {
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
      margin-bottom: 0px;
      border-bottom: none;
      border-bottom-color: #A9D0F5;
      border-bottom-width: 10px;
      border-top: none;
      border-top-color: #A9D0F5;
      border-top-width: 10px;
      background: #A9D0F5;
      margin-top: 0;
      }

      Supprimer
    4. Encore merci pour ton aide ! cette fois c'est la bonne ! A bientot :)

      Supprimer
  19. Salut Catherine !
    J'ai un petit souci que je n'arrive pas à régler. Je voudrais que mon menu horizontal, qui se trouve tout en haut de la page, prenne toute la largueur de l'écran. Je ne trouve pas le code qui me permettrait de faire ça.
    En espérant que tu puisses m'aider :)

    Bonne journée ! xx

    RépondreSupprimer
    Réponses
    1. Bonjour Ophélie,
      Déplaces le code HTML de ton menu comme expliqué dans ce tutoriel : http://ladybirdr.blogspot.co.uk/2014/11/deplacer-la-barre-de-navigation-au.html
      Mais colle le au-dessus du code suivant :

      <div class="content-outer">

      Supprimer
    2. Ensuite remplaces ton code CSS suivant :

      div#barre_nav {
      margin-top: -40px;
      margin-bottom: 10px;
      }

      Par :

      div#barre_nav {
      margin-top: -40px;
      margin-bottom: 10px;
      width: 100%;
      }

      Supprimer
    3. Merci infiniment Catherine ! xx

      Supprimer
  20. Coucou! J'ai installé des boutons de réseaux sociaux au dessus de ma bannière dans mon header et j'aimerais qu'ils soient fixe en haut du blog quand on scroll vers le bas! Est ce possible?
    Merci beaucoup !

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Oui c'est possible mais cela demande du code JavaScript à modifier au cas par cas.
      Si tu le souhaites je peux réaliser cette modification pour toi par prestation. Je suis actuellement en vacances mais je peux regarder ça à mon retour. Si cela t'intéresse envoie-moi un message avec le formulaire de contact accessible sur la page Design.

      Supprimer
  21. Bonjour, je viens de découvrir avec délice ton blog, ce qui m'a permis de refaire à neuf mon site !!
    j'apprécie beaucoup l'option de cette barre de navigation fixe, ça évite que les lecteurs soient perdus une fois arrivés en bas de la page.
    Par contre, comme je met beaucoup d'images, je me suis rendue compte qu'en mode 'lightbox" les images se retrouvent tronquées sous la barre fixe de navigation... drôlement embêtant. J'ai du don déprogrammer le mode, mais j'ai peur que mes lecteurs se lassent vite de devoir revenir en arrière pour regarder chaque photo...
    Une idée de la source du problème ?

    Un grand merci d'avance !!!

    RépondreSupprimer
    Réponses
    1. Bonjour Béatrice,
      Essaye d'ajouter le code CSS suivant :

      .CSS_LIGHTBOX {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999999;
      }

      Au-dessus de :

      /* Content

      Le problème vient de la ligne commençant par "z-index" qui définit la position "en profondeur" de l'élément. Le menu est définit à une position de 9999, or le lightbox est définit à 10 par défaut. Le menu vient donc se positionner devant le lightbox. En définissant la valeur de z-index pour le ligthbox à 999999, il devrait passer devant le menu ;)

      Supprimer
    2. Bonjour, merci beaucoup !! ça n'a pas marché tout de suite, mais ayant pu comprendre d'où venait le problème, j'ai bidouillé un peu et maintenant le problème est résolu !! j'ai mis la valeur du lightbox à la place de la valeur du menu, soit 10 à la place de 9999. Et ça marche, le lightbox est comme avant.
      Super !!

      Supprimer
    3. Bien joué ! ;)
      C'est souvent du bidouillage ^^

      Supprimer
  22. Bonjour,

    J'ai testé le tutoriel mais il y a un espace blanc à gauche du menu... Sais-tu comment corriger ça ?
    Et où puis-je modifier l'écart entre le menu et le logo ?
    Merci d'avance pour ton aide !

    http://testdancinginn.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marie-Charlotte,
      Pour l'espace à gauche du menu, cherches ton code suivant :

      div#barre_nav {
      margin-top: -22px;
      margin-bottom: 20px;
      margin-left: 30px;
      }

      Et remplaces-le par :

      div#barre_nav {
      margin-top: -22px;
      margin-bottom: 20px;
      }

      Pour ajouter un espace entre ton menu et ton en-tête, tu peux par exemple ajouter le code CSS suivant :

      header {
      margin-top: 50px; /* Espace au-dessus de l'en-tête */
      }

      Ajoutes ce code au-dessus de la ligne :

      /* Content

      En augmentant la valeur de 50px tu augmenteras l'espace entre le menu et l'en-tête ;)

      Supprimer
    2. Youhou, ça marche, merci ! :) Mais du coup j'ai l'impression que ma barre de navigation n'est pas centrée... C'est juste une impression ou alors il y a vraiment un souci ? :s tu me sauves la vie à chaque fois, ton blog est la meilleure trouvaille que j'ai pu faire je crois ! Haha

      Supprimer
    3. Effectivement, tu as un espace à gauche de ton menu. Pour supprimer cet espace, ajoutes la ligne :

      padding-left: 0;

      Au code suivant avant le signe } :

      #barre_nav ul {
      text-align: center;
      background-color: #00B4C5;
      padding-top: 8px;
      padding-bottom: 8px;
      }

      De plus, remplaces le code suivant :

      #barre_nav li a {
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      font-size: 16px;
      font-style: normal;
      text-decoration: none;
      color: #FFFFFF;
      margin-right: 30px;
      }

      Par :

      #barre_nav li a {
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      font-size: 16px;
      font-style: normal;
      text-decoration: none;
      color: #FFFFFF;
      margin-right: 15px; /* Espace à droite des liens */
      margin-left: 15px; /* Espace à gauche des liens */
      }

      J'ai simplement remplacé ton espace de 30 pixels à droite des liens par 15px à gauche et 15px à droite pour éviter e décalage des liens de ton menu ;)

      Supprimer
  23. Bonjour,

    J'ai fait comme expliquez.. Mais quand je veux la fixer ma barre se retrouve au milieu avec mon image d'en tête et bouge quand je descend, alors qu'elle devrait être fixer en haut. Et que mon image de ne devrais pas bouger non plus ..
    J'ai essayée de regarder avec les autres commentaires, mais je n'ai pas trouver de problème au mien !

    Cordialement,
    Pauline.

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      C'est parce-que ton menu se trouve dans ton en-tête alors qu'il ne devrait pas l'être.
      Au lieu d'utiliser le code suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Utilise celui-ci :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      Et ça devrait marcher ;)

      Supprimer
    2. C'était aussi simple que ça.. Merci beaucouppppppppp !

      Supprimer
  24. Bonjour,

    J'avais déjà poster un commentaire en disant que ma barre de menu ne prenait pas toute la largeur de la page. Finalement, j'ai réussi. Mais par contre, en apliquant toute les consignes, je ne parviens pas à fixer la barre de menu en haut pour qu'elle descende...

    RépondreSupprimer
    Réponses
    1. Bonjour Audrey,
      Comme tu as déplacé ton menu au-dessus de ton en-tête, le code ci-dessus ne marchera pas.
      Au lieu d'utiliser le code suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Utilise celui-ci :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      Et ça devrait marcher ;)

      Supprimer
  25. Bonjour,

    Je ne sais pas si vous avez eu mon commentaire..
    J'ai un petit problème, quand je fait exactement dans le tutoriel. J'ai mon image de mon entête, et mon menu qui bouge au milieu de l'écran quand je descends ma page. L'image et le menu se superpose. Peut-être que j'ai fais quelque chose de mal.

    Avez-vous une idée?

    En tout cas merci pour les tutos, ça m'aide vraiment beaucoup.

    Cordialement,
    Pauline.

    RépondreSupprimer
  26. Bonsoir ma belle,

    Tout d'abord, je tenais à te remercier pour tous tes Tutos !

    J'ai seulement commencé à coder et j'ai déjà réussi à faire pas mal de choses et cela grâce à toi !

    Avec ce Tuto j'ai un petit soucis, quand je descends il y a un petit espace en haut, et ça me gêne ...

    Si tu as une petite solution, je suis preneuse !

    Merci encore à toi :)

    A très bientôt !

    RépondreSupprimer
  27. ReBonsoir,

    Haha j'ai finalement réglé mon précédent problème ( ouf, oui oui je n'ai pas décollé du pc :P )

    Mais maintenant je me rends compte, qu'elle ne prend pas la totalité de la page ! Il y a un espace " moche " à gauche et droite :)

    Par contre j'ai utilisé l'onglet " Page " !

    Je te remercie d'avance, et je te souhaite une belle soirée !

    RépondreSupprimer
  28. Bonjour,
    tout d'abord merci pour tous les tutos que tu propose ils me sont d'une grande aide. J'ai tout de même un petit soucis depuis que j'ai installer la barre de navigation en haut. Mon logo empiète sur mes articles et lorsque je descend le logo suit avec. Si tu pourrais me dire ce qu'il ne va pas.
    https://beautifulbeautythings.blogspot.com
    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Jade,
      Il me semble que tu as réglé le problème ? Car tout fonctionne de mon côté ;)

      Supprimer
  29. je crois que ma barre n'est pas fixée en haut elle se déplace avec l'ascenseur
    peux tu m'aider?
    http://collectifart14.blogspot.fr/
    merci tout plein

    RépondreSupprimer
    Réponses
    1. Bonjour, si tu as fixé la barre en haut du blog c'est normal qu'elle descend avec la page. Si tu souhaites seulement la déplacer au-dessus de l'en-tête, alors il faut suivre ce tutoriel : http://ladybirdr.blogspot.fr/2014/11/deplacer-la-barre-de-navigation-au.html

      Supprimer
  30. merci mais en fait est-il possible de la déplacer sous le titre ?

    RépondreSupprimer
  31. Bonjour,
    Dès la première étape avec les codes à mettre dans content mon menu disparait en haut de la page et il ne reste qu'une petite ligne de couleur sans texte ni rien.
    J'ai du faire une mauvaise manipulation avant.
    Merci par avance!

    RépondreSupprimer
    Réponses
    1. Il me semble que tu as réglé le problème non ? Car tout semble ok de mon côté ;)

      Supprimer
  32. Youpiiii ça marche !! Je suis ravie, mon blog commence enfin à ressembler à ce que je veux !
    Merci vraiment pour tous tes tutoriels, c'est une aide précieuse !

    J'ai une petite question. Saurais-tu comment je peux mettre mes boutons réseaux sociaux dans la barre de navigation, à droite ?

    Merci par avance !
    Célia

    RépondreSupprimer
    Réponses
    1. Bonjour Célia,
      C'est un tutoriel déjà prévu sur ma liste ;)

      Supprimer
  33. Coucou, première foi que je n'y arrive pas avec tes tutoriels qui sont pourtant très clairs !
    Ma barre de navigation reste bien fixée, mais elle reste fixée en plein milieu de la page en fait, et non pas en haut. Du coup lorsque je fais défiler mon blog la barre reste en plein milieu... que faire ???
    Merci encore , ton blog est vraiment une mine d'or !!

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Je vois que tu as supprimé le code, du coup je ne peux pas voir le problème :/
      Tu peux quand même essayer ceci, au lieu d'utiliser le code suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Utilise celui-ci :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      Supprimer
    2. Malheureusement cela ne marche pas, je vais réessayer ton tuto et laisser le problème pour que tu puisses le voir, si jamais tu as le temps ! Merci encore de ta réponse et de ton aide :)

      Supprimer
    3. Bonjour Julie,
      Tu utilises un gadget Pages et non un gadget HTML, du coup au lieu d'utiliser :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Utilise ces codes :

      #PageList1 {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      #PageList1 ul {
      margin: 0 !important;
      padding-top: 10px; /* Espace entre liens et haut du menu */
      padding-bottom: 10px; /* Espace entre liens et bas du menu */
      }

      Remplace les valeurs pour l'espace entre les liens et le haut et le bas du menu pour augmenter ou diminuer le bord blanc autour des liens ;)

      Supprimer
  34. Hey! Cela fait quelques heures que j'essaye de régler le problème toute seule mais je n'y arrive définitivement pas :/ La barre ne reste pas fixe. Je ne comprend pas...

    Je te remercie d'avance si tu peux m'aider!

    Ton blog est une pure merveille :)
    Heureusement qu'il existe des personnes comme toi pour aider les incompétents comme moi ahah ^^

    Des bises,
    Sybille ♡

    The new new girl

    RépondreSupprimer
    Réponses
    1. Bonjour Sybille,
      Ton menu n'est pas dans son contenant, mais dans celui de l'en-tête. C'est pour ça que ça ne marche pas ^^
      Au lieu d'utiliser ce code :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Utilise celui-ci :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      margin: 0 !important;
      }

      Et voilà ;)

      Supprimer
  35. Coucou ! :)
    Tout d'abord je tenais à te dire que je suis fan de ton blog, et merci du temps que tu prends pour faire ces tutos si bien expliqués !
    Je viens vers toi concernant mon blog, j'ai deux problèmes :
    - La barre de navigation reste sur ma bannière malgré tes explications il y a un hic...
    - J'ai toujours un écart à gauche et à droite qui me rend folle !

    Merci d'avance pour tes futurs conseils !
    Mon blog : http://decadeofshades.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      Le problème vient des espaces que tu as ajouté à ton menu lors de sa création.
      Voici le code de ton menu :

      .tabs-inner .widget ul {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
      background: #EEECE8;
      border-top: solid;
      border-top-color: #EEECE8;
      border-top-width: 1px;
      border-bottom: solid;
      border-bottom-color: #EEECE8;
      border-bottom-width: 1px;
      padding-top: 15px;
      padding-bottom: 15px;
      }

      Il faut définir la valeur des lignes commençant par margin à 0, comme ceci :

      .tabs-inner .widget ul {
      text-align: center;
      margin-top: 0;
      margin-bottom: 0;
      background: #EEECE8;
      border-top: solid;
      border-top-color: #EEECE8;
      border-top-width: 1px;
      border-bottom: solid;
      border-bottom-color: #EEECE8;
      border-bottom-width: 1px;
      padding-top: 15px;
      padding-bottom: 15px;
      }

      De plus, le gadget HTML de ton menu possède aussi une marge. Pour rectifier cela, ajoute le code CSS suivant à la suite des codes CSS de ton menu :

      #HTML5 {
      margin: 0;
      }

      Pour finir, remplace ce code :

      #crosscol {
      margin: 0;
      }

      Par celui-ci :

      #crosscol-overflow {
      margin: 0;
      }


      Si l'espace au-dessus de l'en-tête est toujours insuffisant il te suffit de modifier la ligne margin-top de ton code :

      header {
      background-color: #ffffff; /* Couleur de fond de l'en-tête */
      margin-top: -5px; /* Espace au-dessus de l'en-tête */
      }

      Supprimer
  36. Bonsoir ! :)

    Merci pour ton aide c'est déjà un peu mieux, mais j'ai du manquer un épisode car j'ai toujours un écart en haut, et le texte s'est mis à gauche tout seul ! Grrrr cette barre aura ma peau !

    Pas facile de créer un blog structuré quand on démarre, mais ça me passionne et je persiste !

    RépondreSupprimer
  37. Bonjour,
    j'ai réussi à fixer la barre de navigation en haut, mais il y a malheureusement un petit espace entre le haut de la page et la barre de navigation. J'ai testé les codes ci-dessus mais ça n'a pas marché. Comment faire?
    J'aimerai aussi augmenter la largeur de la barre de navigation, pour qu'elle soit un peu plus grande.

    Merci beaucoup pour tous tes tutoriels qui sont SUPER utiles!

    Antoine.

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      Peux-tu me donner le lien vers ton blog ?

      Supprimer
  38. Bonjour,

    Voilà quelque temps que j'ai fait ce tuto maintenant mais y'a rien à faire, je pense que ça viens de là. Mon menu est superbe, en revanche impossible de centrer automatiquement le "header" (en-tête + titre) situé juste en dessous.
    La seule façon que j'ai trouvée pour le centrer c'est de le mettre à 200px de la gauche. ça marche pour mon écran, mais du coup, pour tous les autres écrans ou presque l'image n'est pas centrée.

    J'ai tout fait. J'ai même un module pour examiner le html et le css. Je commence à m'y connaître un peu à force de fouiner mais là, je suis désespérer après avoir passé des jours dessus... si tu as une idée je suis preneur... tous les "text-align: center" que j'ai rajouté n'y changent rien :(
    (http://lenormanditinerant.blogspot.fr/) Il suffit de faire un "CTRL + mollette souris" pour voir que l'image reste au même endroit tout le temps.
    Merci d'avance pour tes conseils, et bonne continuation!

    Flo

    RépondreSupprimer
    Réponses
    1. Bonjour Flo,
      Pour centrer ton en-tête sans qu'il touche les bords de la page, il suffit de définir une largeur maximale de ton en-tête et de le centrer avec :

      margin: 0 auto;

      Voici le code à utiliser :

      header {
      max-width: 1500px;
      margin: 0 auto;
      }

      Et voilà ;)

      Supprimer
  39. Bonjour, excusez-vous de vous déranger, mais comment faites-vous mettre la même barre de navigation que vous mais avec les côtés en continue, et avec les logos facebook, twitter et mail + barre de recherche s'il vous plaît, car ça m'intéresse beaucoup à le faire (car je compte refaire entièrement mon blog http://nonynews.blogspot.fr/) merci beaucoup :)

    RépondreSupprimer
    Réponses
    1. Bonjour Anthony,
      Tu peux déjà fixer le menu en haut du blog comme sur mon blog en suivant le tutoriel ci-dessus. Tu peux également rajouter une barre de recherche avec mon tutoriel sur le sujet :
      http://ladybirdr.blogspot.com/2015/07/ajouter-une-barre-de-recherche-au-menu.html
      Pour les boutons vers les réseaux sociaux, j'ai prévu d'écrire un tutoriel expliquant comment le réaliser ;)

      Supprimer
    2. d'accord merci, j'ai hâte, je dois refaire mon blog dans 1 à 2 semaines, est-ce que le tutoriel pour les logos sera mis en ligne d'ici là ?

      Supprimer
  40. Coucou,
    Tout d'abord merci pour tout tes tutos (j'en ai déja utilisé plusieurs et ils sont tout simplemetn géniaux!)
    Ensuite j'ai une question:
    Ma barre de navigation se fixe parfaitement bien en haut elle est belle et tout et tout... Mais quand on descend dans le blog il y a un vide au dessus de cette barre. Peut-tu me dire pourquoi et comment le supprimer? mon blog: http://les-bookronikeuses.blogspot.fr/
    Et j'ai une deuxième petite question sans rapport avec ce tuto mais je cherche désespérément comment mettre une image et que si on l'a survole par la souris elle soit interchangée par une autre image ( dans les widgets et articles) peut- tu m'aider??
    J'éspère avoir été assez clair...
    Merci d'avance ;)
    A bientôt

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour ton menu remplace ce code :

      .region-inner.tabs-inner {
      padding: 0;
      }

      Par :

      .region-inner.tabs-inner {
      padding: 0;
      margin: 0;
      min-width: 100%;
      }

      Et celui-ci :

      .tabs-inner .widget ul {
      margin-top: 20px;
      margin-bottom: 15px;
      background: #aecdd0;
      text-align: center;
      }

      Par :

      .tabs-inner .widget ul {
      padding-top: 20px;
      padding-bottom: 15px;
      background: #aecdd0;
      text-align: center;
      }

      Pour l'image, c'est plus compliqué. Il faut utiliser du HTML et du CSS pour chaque image. Je note l'idée d'en faire un tutoriel, ce sera beaucoup plus clair qu'une réponse de commentaire ^^

      Supprimer
    2. Merci c'est parfait! Et d'accord, j'attendrais le tutoriel;)

      Supprimer
  41. Déjà merci pour tout tes tutos car je viens de realiser mon design en entier seul grâce à ça !! Peut tu me dire ou je peux rétrécir l'espace entre ma barre menu et mon header ? Merci
    http://ananasgivre.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Pour réduire l'espace au-dessus de ton en-tête, on peut décaler l'en-tête vers le haut du blog.
      Ton en-tête se trouve dans un gadget HTML : HTML2. Il faut donc ajouter un code CSS ciblant ce gadget, comme ceci :

      /* Déplace le gadget en-tête vers le haut */
      #HTML2 {
      margin-top: -20px;
      }

      La valeur négative de margin-top permet de décaler le gadget vers le haut ;)

      Supprimer
  42. J'avais poster un commentaire il y a environ 2 ou 3 semaines, vous ne l'avez jamais publié, pourquoi ? Je posais une question comme j'en avais posé d'autre avant.. Et sur un autre commentaire, j'avais publié une réponse à une question qu'un internaute se posait, pareil jamais publié .... sympa ?! ça sert à ça le contrôle de commentaire ? si vous avez le courage de me répondre au moins sur celui-ci ... normantraveler@gmail.com

    RépondreSupprimer
    Réponses
    1. Euh je ne comprend pas trop votre commentaire. Je publie tous les commentaires. Cela peut me prendre du temps à les publier car je dois trouver le temps de modérer les commentaires qui sont de plus en plus nombreux.

      Le dernier commentaire en date que j'ai de vous est le suivant (juste au-dessus de celui-ci) auquel j'ai bien répondu : http://ladybirdr.blogspot.fr/2014/12/fixer-la-barre-de-navigation-en-haut-du.html?showComment=1445413684614#c1936152833157875741

      Je vous prie de bien vérifier avant de m'accuser sans raison...

      Supprimer
  43. Merci pour ton aide!
    J'ai juste une question supplémentaire: comment faut-il faire pour que la barre de navigation fasse toute la largeur du blog (comme sur le tien)?
    Merci

    Abby

    RépondreSupprimer
    Réponses
    1. Bonjour Abby,
      Normalement en ajoutant le code CSS donné dans le tutoriel le menu devrait prendre toute la largeur du blog. Peux-tu me donner le lien vers ton blog pour que je puisse regarder ça ?

      Supprimer
  44. Bonjour Ladybirdr,

    Je suis vraiment contente de découvrir ton blog ainsi que tous tes tutos. Au top !
    Seulement voilà ! J'ai deux petits soucis.
    1) Je ne trouve pas le code : .main-outer } Du coup, je ne peux pas avancer pour mettre la barre fixer en haut.
    2) J'aimerai beaucoup élargir la barre un peu comme votre barre de navigation. Je la trouve bien trop fine chez moi.
    Pouvez vous m'aider svp ??

    RépondreSupprimer
    Réponses
    1. Bonjour Hami,
      Si tu ne trouves pas ce code alors tu peux le rajouter manuellement. Ajoute ceci dans tes codes CSS :

      .main-outer {
      margin-top: 40px;
      }

      Et voilà ;)

      Supprimer
    2. Pour la largeur de la barre de navigation, tu peux modifier l'espace autour des liens de ton menu en modifiant le code CSS de test liens. Tu trouveras les codes à modifier dans la partie 2 du tutoriel sur le menu : http://ladybirdr.blogspot.com/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
    3. Re moi,

      Merci pour votre retour mais hélas, ça ne passe pas. Où dois je placer ce code : .main-outer {
      margin-top: 40px;
      }
      Dans quelle partie css dois je le mettre svp ? Car il n'y a pas de changement. Bizarre.

      Supprimer
  45. Bonjour Catherine,
    Je n'arrive pas à finaliser le code car en cliquant sur enregistrer, il ne me valide pas la ligne suivante :
    border-top: $(main.border.width) solid $(body.rule.color);
    car apparement main.border.width n'existe pas...

    Et je n'ai pas trouvé le code .main-outer { (je l'ai donc copié collé de ce tuto) et dans .content-inner { je retrouve seulement
    .content-inner {
    padding: 0;
    }

    J'ai parcouru les commentaires, et je n'ai pas trouvé de solutions. Saurais tu d'où le problème pourrait venir ? Merci beaucoup pour ton aide !

    Sandrine

    RépondreSupprimer
    Réponses
    1. Bonjour Sandrine,
      As-tu réglé le problème de main.border.width ?
      Si tu as ce message d'erreur c'est que tu as supprimé des codes dans la partie variables de ton thème. Charge la sauvegarde que tu as du faire avant de faire ces modifications et recommence.

      Pour .main-outer { tu peux tout à fait l'ajouter dans ton code CSS.
      Pour .content-inner { pas de soucis, tant que tu as ce code CSS tu peux ajouter la ligne donnée dans le tuto ;)

      Supprimer
  46. Bonjour Catherine,

    Merci beaucoup pour ce tutoriel, j'ai presque tout réussi. Un seul problème pourtant gênant ; ma barre de navigation est trop collée au haut de la page, disons qu'il n'y a aucun espace entre le haut de la page et ma barre de navigation, je ne sais pas si c'est assez clair. Je te laisse voir :
    http://rose-guimauve.blogspot.fr/

    Merci d'avance.

    Rose

    RépondreSupprimer
    Réponses
    1. Bonjour Rose,
      Il faut ajouter un espace au-dessus de ton menu, ou des liens de ton menu.
      Retrouve ce code CSS :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      background: #FFFFFF;
      }

      Rajoute avant le signe } ceci :

      padding-top: 15px; /* Espace au-dessus des liens du menu */
      padding-bottom: 15px; /* Espace en-dessous des liens du menu */

      Comme ceci :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      background: #FFFFFF;
      padding-top: 15px; /* Espace au-dessus des liens du menu */
      padding-bottom: 15px; /* Espace en-dessous des liens du menu */
      }

      Modifie la valeur de 15px comme tu le souhaites. En augmentant cette valeur tu augmenteras l'espace et en diminuant la valeur tu diminueras l'espace autour des liens de ton menu ;)

      Supprimer
  47. Bonjour,
    J'adore ton blog, et tes tutos qui m'aident énormément, mais j'ai un petit soucis avec la barre, la barre de navigation reste fixe avec ma bannière, du coup quand je défile ma page, j'ai ma bannière qui vient avec et je sais pas comment remettre tout ça.

    Merci d'avance :)
    http://somilymera.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réglé le problème ? Cela s'affiche correctement de mon côté ;)

      Supprimer
  48. Re coucou !!

    Je suis dégoutée, ça ne fonctionne pas.
    Si tu peux m'aider, ça serait vraiment sympa de ta part !
    Voici mon blog (http://www.hamisoitil.fr)

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Essaye avec le code suivant :

      #header {
      margin-top: 60px; /* Espace au-dessus de l'en-tête */
      margin-bottom: 40px; /* Espace en-dessous de l'en-tête */
      }

      Vas dans Modèle > Modifier le code HTML. Clique sur le triangle noir à gauche de :

      <b:skin>...</b:skin>

      Si tu ne le trouves pas, c'est que cette partie est déjà ouverte. Passe à l'étape suivante.

      Clique maintenant n'importe où dans la boîte de code et appuie en même temps sur Ctrl et F (ou Cmd et F sur Mac). Une boîte de recherche apparaît en haut à droite de la boîte de code. Entre ceci, et appuie sur Entrer :

      /* Content

      Colle le code que je t'ai donné juste au-dessus de cette ligne.

      Modifie les valeurs de 60px et 40px pour augmenter ou diminuer l'espace autour de l'en-tête ;)

      Supprimer
  49. Coucou !!
    Merci, j'ai reussi ! Ouf !
    Tu es tout simplement fantastique et merci pour tous ces tutos gratuits :)

    RépondreSupprimer
  50. Bonjour ladybirdr

    Merci pour tous ces tutos. Me concernant j'ai un soucis avec le fait que le menu soit tout en haut car elle cache la navbar. Je l'utilise pour nouvel article conception ..
    je souhaite que cette navbar soit sous le menu ou que celle ci soit en pied de page.

    merci pour ton aide précieuse

    cgtplateformechimietavaux.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Stephane,
      J'ai fait un tutoriel sur la barre de cookies ici : http://ladybirdr.blogspot.com/2015/07/comprendre-et-modifier-la-barre-de.html

      Supprimer
  51. Bonjour

    Merci pour ce tutoriel !

    Suite aux changements, la barre de navigation apparaît bien en haut du blog, mais la catégorie " Accueil " apparaît tout en haut à gauche du blog. J'ai alors désactivé l'accueil dans la mise en page car elle était complètement décalée de la barre de navigation mais j'aimerai qu'elle apparaisse " centrée " sur la barre de navigation

    Comment rémédier à cela, s'il vous plaît ?

    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Nora,
      N'ayant pas accès à ton blog, je ne peux te donner que des pistes.
      Essaye d'ajouter ceci :

      text-align: center;

      avant le signe } du code :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Ensuite ajoute ce code :

      #barre_nav {
      margin: 0 auto;
      }

      Vérifies également que tu as :

      text-align: center;

      Dans le code commençant par :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {

      Supprimer
    2. Je te remercie pour ta réponse !!!

      Je vais tester :)

      Supprimer
  52. Bonjour ! Merci pour ce tuto pour commencer ! J'ai essayé de résoudre mon problème avec les réponses aux questions mais rien à faire, il reste un espace au dessus de ma barre de menu quand je défile sur la page, est-ce que tu pourrais trouver un moyen pour moi de l'enlever ? Merci beaucoup !

    http://moondies.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Nadège,
      Il y a un petit espace balnc au-dessus des liens mais cela vient de tes icônes Instagram et Facebook qui sont plus grand en hauteur que tes liens.
      Tu peux réduire la taille de tes icônes ;)

      Supprimer
    2. D'accord merci beaucoup pour ta réponse ! :)

      Supprimer
  53. Bonjour Catherine,
    Merci pour ce tutoriel, j'ai tout réussi à r"aliser sauf un petit détail embêtant :/
    J'aimerais modifier la hauteur de ma barre de navigation que je trouve 3 fois trop petite. Est-ce possible ?
    Si tu veux un aperçu du rendu en ce moment : http://rose-guimauve.blogspot.fr/
    J'espère que tu pourras m'aider.
    Merci d'avance.
    Bonne soirée/journée.

    Rose

    RépondreSupprimer
    Réponses
    1. Bonjour Rose,
      Il faut ajouter un espace autour des liens de ton menu. Tu peux trouver les détails dans le tutoriel sur l'apparence de la barre de navigation ;)

      Supprimer
  54. Bonjour, comment fait-on pour enlever les séparations blanches entre chaque onglet s'il vous plaît ? http://nonynews.blogspot.fr/ merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Anthony,
      Retrouve le code commençant par :

      .tabs-inner .widget li a {

      Supprime les 2 lignes qui commencent par :

      border-left:

      et

      border-right:

      Et voilà ;)

      Supprimer
    2. ah merci beaucoup ^^ :) toujours là pour chaque problème !

      Supprimer
  55. Bonjour~

    j'ai deux petite questions ^^
    1. est-ce qu'il est possible de faire que le menu soit en dessous de l'image titre du blog et qu'il ne se fixe en haut que lorsque en faisant dérouler la page on passe dessus?

    2. Comment peut on créer un espace entre deux sections d’éléments dans la barre de menu (comme dans ta barre il y a un espacement entre tes catégories et tes liens vers les réseaux sociaux)? j'essaye désespérément mais sans succès....

    RépondreSupprimer
    Réponses
    1. Bonjour Mélissa,
      Pour ta 1ère question, c'est sur ma liste de tutoriels à faire.
      Pour ta 2e question, j'ai écrit un tutoriel pour séparer le menu en 2 parties pour réaliser cela. Il sera en ligne demain ;)

      Supprimer
    2. Merci beaucoup de ta réponse^^ et de tes tutoriels toujours géniaux et facile à comprendre!

      Supprimer
  56. Bonjour et merci pour tous tes tutos, mon blog ne ressemblerait encore à rien sans toi ^^ J'ai un petit problème pour fixer ma barre de navigation en haut, je ne trouve pas content-inner en fait et quand je le rajoute, je ne peux rien enregistrer à cause des dollars il me semble et du coup ça ne marche pas ! Désolée de t'embêter avec ça, j'ai essayé plusieurs fois avant de te contacter mais il faut que je me rende à l'évidence, toi seule pourra m'aider x)

    RépondreSupprimer
    Réponses
    1. Bonjour Victorine,
      Peux-tu me donner le lien de ton blog pour que je puisse regarder ça ? :)

      Supprimer
    2. L'adresse est http://www.questofheaven.com :)

      Supprimer
    3. Bonjour Victorine,
      Du coup, comme tu as déplacé ton menu en haut de ton blog avec mon autre tutoriel, tu peux simplement utiliser le code suivant pour le "fixer" en haut du blog à la place :

      /* Fixer la barre de navigation en haut du blog */

      #barre_nav {
      margin-top: -14px;
      margin-bottom: 0;
      position: fixed;
      top: -2px;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Rajoute ce code CSS juste avant la ligne :

      /* Headings

      Ensuite pour ajouter de l'espace entre le haut du blog et ton en-tête, ajoute le code CSS suivant :

      #header {
      margin-top: 30px !important;
      }

      Juste avant la ligne :

      /* Tabs

      Augmente ou diminue la valeur de 30px pour ce qui te plaît :)

      Supprimer
    4. Bonjour,
      Je l'ai fait mais le texte s'efface... J'ai enlevé pour l'instant du coup. Désolée de t'embêter encore ^^

      Supprimer
    5. Le problème du menu qui s'efface vient sûrement de ce code :

      /* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
      div#barre_nav {
      margin-top: -45px; /* Espacement avant la Barre de Navigation */
      margin-bottom: 20px; /* Espacement après la Barre de Navigation */
      }

      Remplace -45px par 0px comme ceci :

      /* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
      div#barre_nav {
      margin-top: 0px; /* Espacement avant la Barre de Navigation */
      margin-bottom: 20px; /* Espacement après la Barre de Navigation */
      }

      Et voilà ;)

      Supprimer
    6. Nouvelle tentative, j'ai refait exactement comme tu le disais plusieurs fois mais ça ne fonctionne toujours pas x) Si ça t'embête on peut laisser tomber ^^

      Supprimer
  57. Hello Catherine!
    J'ai fais tout ce que tu as expliqué dans ce tuto, mais ma barre de navigation descend en même temps quand on descend la plage du blog pour voir la suite.. Du coup la barre se retrouve sur mes articles (ce qui est très gênant pour lire un texte..) Qu'est-ce que je dois faire pour que la barre de navigation reste fixée même si on descend plus bas dans le blog ?

    RépondreSupprimer
    Réponses
    1. Bonjour Lisa,
      En effet, ce tutoriel permet de fixer le menu en haut de la page pour qu'il soit affiché même quand on descend la page.
      Si tu souhaites simplement déplacer le menu au-dessus de ton en-tête, alors il faut suivre ce tutoriel : http://ladybirdr.blogspot.com/2014/11/deplacer-la-barre-de-navigation-au.html
      Attention à bien supprimer les modifications que tu as apporté à ton thème pour fixer le menu en haut du blog, sinon le nouveau tutoriel n'aura aucun effet ;)

      Supprimer
  58. Bonjour Catherine,

    J'ai un petit soucis, que j'ai essayé de résoudre avec tous les commentaires mais ça ne fonctionne pas :/

    J'ai réçu ENFIN a avoir une jolie barre de navigation en haut, elle descend quand je scroll,nikel, MAIS il y a un espace "vide" au dessus de ma barre quand on descend, j'aimerais qu'elle soit tjs fixer en haut, un petit conseil stp ?!

    En tout cas merciiiiiiiii beaucoup pour tous ces tutos <3

    Bon week end à toi
    Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,

      Dans le code suivant :

      /* Fixer la barre de navigation en haut du blog */

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Modifie la valeur de la ligne :

      top: 0;

      pour une valeur négative. Cela déplacera ton menu vers le haut et supprimera ce vide ;)

      Supprimer
  59. Bonjour Catherine,

    Tout d'abord merci beaucoup pour tous ces tutos ! C'est très agréable d'avoir de l'aide lorsqu'on débute.

    J'ai donc fais la barre de menu , tout fonctionne, le seul problème est qu'elle ne fait pas toute la longueur. Je ne sais pas si je suis assez clair, j'aimerais qu'en faite elle fasse toute la longueur, je ne veux pas d'espace ! Merci d'avance

    RépondreSupprimer
  60. mon blog est : ahmabichette.blogspot.fr oups

    RépondreSupprimer
    Réponses
    1. Bonjour Cécilia,
      Retrouve ton code suivant :

      #PageList1
      {
      padding-left: 235px
      }

      Remplace-le par ceux-ci :

      #PageList1 {
      padding-left: 0;
      background: #eeeeee url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
      top: -2px;
      }

      #PageList1 ul {
      margin: 0 auto !important;
      max-width: 1240px;
      }

      Sauvegarde et voilà ;)

      Supprimer
  61. Coucou et encore merci pour ce tuto! C'est super bien expliqué comme d'habitude :)
    J'ai fait le tutoriel et tout à bien fonctionné de mon côté, m'aidant peu des commentaires pour les difficultés rencontrées. Néanmoins j'ai rencontré un petit bémol.
    J'ai réussi à fixer la barre de navigation nikel, mais il reste des petits espaces blancs sur le côté et malgré le "width: 100%;" et les quelques petites manip rien n'y fait, ils ne disparaissent pas. Aurais-tu une solution à me proposer?
    J'ai vu qu'on t'a déjà posé la question plusieurs fois, mais rien ne marche sur mon blog.
    Passe de bonnes fêtes!

    Maë

    RépondreSupprimer
    Réponses
    1. Bonjoue Maë,
      As-tu réglé le problème ? Car je ne vois pas les espaces blancs :)

      Supprimer
  62. Coucou, bonne année ! :D
    J'ai essayé de faire le tuto, je l'ai recommencé plusieurs fois mais ce message s'affiche à chaque fois :
    Invalid variable declaration in page skin: Variable is used but not defined. Input: main.border.width
    Je ne sais pas du tout quoi faire :/
    D'ailleurs, je ne sais pas si ça s'arrangera par la suite ou pas, je préfère demander tout de suite, mais j'ai un autre gadget HTML (avec les chroniques) qui se place du coup aussi au dessus du blog, tu sais comment faire pour qu'il reste à sa place normale ? :)

    Voici le lien de mon blog : http://lectureavie.blogspot.com

    D'avance merci, bisous !

    RépondreSupprimer
    Réponses
    1. Bonjour Léa,
      Tu as dû supprimer un bout de code dans les variables au-dessus des codes CSS. C'est ce genre de message qu'on obtient quand c'est le cas.
      Fait attention à bien coller les codes CSS juste avant, par exemple :

      /* Content

      Supprimer
    2. Pour éviter que ton autre gadget se déplace avec le menu, utilise le code CSS suivant à la place de ceux donnés dans le tutoriel :

      /* Fixer la barre de navigation en haut du blog */
      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Supprimer
    3. Merci pour ta réponse, ça marche ! :)
      Par contre il y a toujours un problème... La barre laisse un espace vide au-dessus d'elle, c'est-à-dire que quand je descends, le menu n'est pas collé :/ Tu saurais comment régler ça ?
      Merci pour tes conseils !

      Supprimer
    4. Bonjour Léa,
      Tu as ajouté un espace au-dessus de ton menu, d'où l'espace entre le haut de la page et le menu ;)
      Retrouve ce code CSS :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      margin-top: 20px;
      margin-bottom: 20px;
      border: none;
      background: #FEFEFE;
      text-align: center;
      }

      Remplace la ligne :

      margin-top: 20px;

      Par :

      margin-top: 0;

      Et voilà ;)

      Supprimer
  63. Bonjour,

    Est ce possible de fixer la barre de navigation en haut du blog quand on scroll vers le bas, sans que celle-ci se retrouve au-dessus du titre? J'aimerais la laisser en dessous du titre, mais qu'elle soit fixée une fois qu'on scroll vers le bas de la page.

    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      Cela est possible il faut utiliser du JavaScript pour changer la valeur de display quand descend la page.
      On m'a déjà demandé comment faire, je l'ai noté sur ma liste de tutoriels à faire ;)

      Supprimer
  64. Bonjour,
    tout d'abord, merci beaucoup pour tous vos tutos qui me sont très utiles !!
    Je ne sais pas trop où poster cette question alors je le fais ici.
    Peut on faire apparaître le menu sur la page d'accueil par exemple et la faire disparaître lorsque l'on est sur une page d'article ?
    Merci d'avance pour votre réponse !
    Léna

    RépondreSupprimer
    Réponses
    1. Bonjour Léna,
      Oui c'est possible. Si tu souhaites cacher le menu sur toutes les pages Articles alors ajoute ce code :

      <!-- Affichage sur page des articles -->
      <b:if cond='data:blog.pageType == "item"'>
      <style type='text/css'>

      .tabs-outer {
      display: none;
      }

      </style>
      </b:if>

      Juste après la ligne commençant par :

      <body

      Et voilà ;)

      Supprimer
  65. Merci pour cet excellent tuto !!!

    RépondreSupprimer
  66. Bonjour,
    Je suis désolée, j'arrive après tout le monde, mais vos tutos sont géniaux... Ils m'aident beaucoup cependant, étant totalement novice, j'ai encore quelques soucis. Sur mon blog, je n'ai pas le code avec content du coup je ne sais pas où placer le code fourni pour mettre la barre du menu en haut. J'espère que ce que je dis est compréhensible.
    Bon courage et bonne journée

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Le problème vient de ton thème. Colle les codes juste avant la ligne suivante :

      ]]></b:skin>

      Supprimer
  67. Bonjour Catherine,

    J'ai bien fait tous ce que tu as écrit mais ma barre de menu ne bouge pas du tout. J'ai un espace en haut de mon site pour la mettre maintenant mais elle ne bouge pas. Help.
    Adresse du blog (travail pour l'école) : http://novotel-blog.blogspot.fr/
    Cyrielle

    RépondreSupprimer
    Réponses
    1. Bonjour Cyrielle,
      Je ne vois pas le code CSS pour fixer le menu sur ton blog. Il faut coller le code CSS donné dans le code CSS de ton thème.
      Essaye de le coller avant la ligne suivante :

      ]]></b:skin>

      Supprimer
  68. Bonjour
    Je n'arrive pas a faire fonctionner les typos Google..

    Est ce que vous pouvez m'aider ?
    http://alizeeduchemin.blogspot.fr/

    Alizée

    RépondreSupprimer
    Réponses
    1. Bonjour Alizée,
      Quelles polices ne fonctionnent pas ?

      Supprimer
  69. Bonjour, j'ai tout fait comme tu l'as si bien expliqué, et ma barre de navigation reste en dessous de ma bannière, et elle descende en meme temps, enfin ca n'as pas marcher :(

    RépondreSupprimer
  70. Merci de ce que tu pourras faire :/

    RépondreSupprimer
  71. Enfin la barre de navigation et la banniere se mette au milieu de l'écran

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton menu doit être placé au mauvais endroit.
      Utilise le code CSS suivant à la place de ceux donnés dans le tutoriel, si tu as créé ton menu en suivant mes tutoriels :

      /* Fixer la barre de navigation en haut du blog */
      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Supprimer
  72. Bonjour Catherine,

    Merci beaucoup pour tout ces supers tutos. J'ai put largement améliorer mon blog grâce à tous vos conseils.
    Par contre j'ai un soucis, quand je scroll vers le bas, les dates et titres passent au dessus de ma barre de menu et ce n'est pas super esthétique.

    http://berenicecharlotte.blogspot.fr/

    Si jamais vous avez 2 minutes pour regarder d'où viens le soucis, ça serai adorable :)

    Bonne journée

    RépondreSupprimer
    Réponses
    1. Bonjour Bérénice,
      J'ai l'impression que tu as réglé le problème ?
      Si cela persiste augmente la valeur de la ligne z-index de ce code CSS :

      .tabs-outer {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      z-index: 100;
      }

      Remplace 100 par 999999 par exemple.

      Petit commentaire a part, j'ai plus trop le temps de suivre des blogs maintenant, mais ça me touche que tu utilises mes tutos car je suivais ton ancien blog ! ^^
      Et tu as fait un très joli boulot ! :)

      Supprimer
  73. Hello,

    Tout d'abord un grand merci pour tes tutos très pédagogiques, simples, qui me réconcilie avec le code, haha :D
    J'ai des petits problèmes. Tout d'abord la valeur main-outer n'existe pas dans mon code, donc j'ai voulu la rajouté moi-même mais blogger n'est pas content et m'affiche un message en rouge.
    Deuxièmement, quand j'ajoute mon code dans le content-inner il me met ça : Invalid variable declaration in page skin: Variable is used but not defined. Input: content.padding.horizontal

    Je ne sais pas trop comment faire pour régler cela, donc si tu as quelques minutes pour m'aider :) merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Lice,
      Il semblerait que tu ai supprimé un code qui se trouve dans la partie avant les codes CSS. Malheureusement, il faut repartir d'une sauvegarde de ton thème que tu as du faire avant de faire les modifications. Si tu n'as pas fait de sauvegarde tu peux chercher le code qu'il te manque dans un blog test tout neuf. Cherche "content.padding.horizontal" dans ton thème et dans celui du blog test neuf. Copie les codes qu'il te manque dans ton thème à partir du blog test.

      Supprimer
  74. Bonjour,
    Merci pour ces supers tutoriels qui m'aident vraiment beaucoup.
    Tout fonctionne parfaitement sauf que mon logo défile en meme temps que la barre de naviguation alors que je voudrais qu'il soit fixe je n'ai trouvé aucune solution. Merci d'avance :) http://sweetspeonies.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Jade,
      Si ton en-tête se déplace avec ton menu c'est que tu as ajouté ton image d'en-tête dans un gadget HTML au lieu de l'ajouter dans le gadget en-tête prévu à cet effet.
      Le moyen le plus simple de régler le problème est de remplacer la première ligne de ton code (après le commentaire) :

      /* Fixer la barre de navigation en haut du blog */
      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Par :

      #barre_nav {

      Ce qui donne :

      /* Fixer la barre de navigation en haut du blog */
      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Et voilà ;)

      Supprimer
  75. Bonjour Catherine,
    J'aimerais savoir s'il est possible de fixer la barre de navigation mais sans avoir à la mettre en haut du blog de base, quelle reste sous mon nom de blog et qu'elle se fixe en haut seulement lorsque l'on navigue sur le blog.
    Merci.
    http://Gwylind.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible avec un peu de code Javascript. J'ai déjà prévu d'en faire un tutoriel ;)

      Supprimer
    2. Je l'attends avec impatience alors! Merci pour ta réponse :)

      Supprimer
  76. Bonjour :)
    Je voulais savoir comment je dois faire pour avoir une barre de navigation plus "épaisse" comme toi? La mienne est minuscule et les écritures sont trop "serrées" contre le bord de la page .
    Merci beaucoup, et super blog !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter des marges au-dessus et en-dessous de tes liens avec les lignes suivantes :

      padding-top: 10px; /* Espace au-dessus des liens */
      paddong-bottom: 10px; /* Espace en-dessous des liens */

      A ajouter au code commençant par :

      .tabs-inner .widget li a {

      Pour l'alignement, tu peux définir une largeur maximale de la liste de liens de ton menu avec les codes suivants :

      margin: 0 auto !important;
      width: 1100px;

      A ajouter au code commençant par :

      .tabs-inner .widget ul {

      Pour finir, il faut ajouter la même couleur de fond de ton menu, à son contenant avec le code CSS suivant :

      #barre_nav {
      background: #DCDCDC;
      }

      Et voilà ;)

      Supprimer
  77. Bonjour Catherine !
    C'est encore moi O:)
    J'avais déjà posté un comment sur un autre article.
    Je ne sais pas par quel miracle j'ai résolu mon problème de menu déroulant mais c'est tout bon !
    Maintenant j'ai réussi à fixé ma barre en haut mais j'ai l'impression qu'elle mord légèrement sur mon image de titre. Comment je peux enlever ça ?

    Et même avec ton tuto pour avoir le menu à 100% de la page il y a toujours un espace à droite et à gauche. Je vais finir par m'arracher vraiment les cheveux. Hahaha


    Merci pour ton aide si précieuse Ô Catherine, reine des code css !

    www.m-art-rion.blogspot.ch

    RépondreSupprimer
  78. Bonjour Catherine,

    J'ai suivi à la lettre vos instructions (qui m'ont été d'une grande aide pour mon blog) mais dans ce cas, j'ai collé les codes indiquer mais la barre ne reste pas fixée...
    Seul les espaces se sont bien mis en place.

    Pourriez vous m'aider ?
    Merci d'avance.

    Kimberley


    RépondreSupprimer
  79. Coucou :)

    Merci déjà pour tes tutos juste parfait, ils m'ont beaucoup aidé.
    Cependant, ma barre n'est pas centrée, comment faire?
    Merciiii

    RépondreSupprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger