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

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Voici enfin le tant attendu tutoriel pour déplacer sa barre de navigation au-dessus du titre de son blog !
Dans ce tutoriel, je vais vous expliquer comment simplement déplacer votre barre de navigation vers le haut de votre blog. Il ne restera pas visible même en descendant la page. Ce sera pour le prochain tutoriel ;)

Déplacer la barre de navigation au-dessus du titre du blog Blogger

C'est parti pour les explications :)

Le code HTML

Si vous avez suivi mes différents tutoriels sur :
Alors vous avez déjà créé votre barre de navigation. Nous allons simplement déplacer son code HTML.
Si vous n'avez pas suivi ces tutoriels, je vous conseil d'y jeter un œil ;)

Déplacer le code HTML de sa barre de navigation

Si vous avez déjà créé votre barre de navigation en suivant mes tutoriels, allez dans Mise en page à partir du tableau de bord. Sur le widget correspondant à votre barre de navigation, cliquez sur Modifier :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Copiez le code HTML de votre barre de navigation :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Allez dans Modèle, puis cliquez sur Modifier le code HTML :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Cliquez sur Accéder au widget, puis sélectionnez Header1 dans le liste proposée :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Vous devrez retrouver ceci :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Collez le code HTML de votre barre de navigation au dessus de ce code :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Enregistrez. Vous obtenez alors 2 barres de navigation sur votre blog :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Supprimer l'ancienne barre de navigation

Maintenant que nous avons déplacé notre barre de navigation, il faut supprimer l'ancienne. Retournez sur la fenêtre du gadget correspondant à votre barre de navigation et cliquez sur Supprimer :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Ce qui donne visuellement :

Déplacer la barre de navigation au-dessus du titre du blog Blogger

Le code CSS : définir le visuel de notre barre de navigation

Vous aurez sûrement remarqué que votre nouvelle barre de navigation a perdu tous les paramètres visuels que vous lui aviez défini.
Ne vous inquiétez pas ! Rien n'est perdu :)

Il suffit de remplacer un peu de code.

Le code CSS qui va correspondre à votre nouvelle barre de navigation est le suivant :
/* Menu
----------------------------------------------- */
/* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
div#barre_nav {
margin-top: -10px; /* Espacement avant la Barre de Navigation */
margin-bottom: 20px; /* Espacement après la Barre de Navigation */
}

/* Espacement et Bordure du Dernier Lien de la Barre de Navigation */
#barre_nav .section:last-child li {
padding-right: 0px;
}

/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
#barre_nav .section:first-child li {
padding-left: 0px;
}

/* Fond et Bordure de la Barre de Navigation */
#barre_nav ul {
text-align: center;
background-color: #fff;
padding: 0;
margin: 0;
}

/* Police et Couleur des Liens */
#barre_nav li a {
font-family: Calibri;
text-transform: uppercase;
font-size: 14px;
color: #525252;
text-decoration: none;
}

/* Police et Couleur des Liens quand Survolés par la Souris */
#barre_nav li.selected a, #barre_nav li a:hover {
color: #000000;
}

/* Couleur du Fond des Liens quand Survolés par la Souris */
#barre_nav li:hover {
background-color: #ffffff;
}

/* Visibilité de la Bordure des Liens */
#barre_nav ul {
overflow: visible;
}

/* Centrer la Barre de Navigation + Largeur des Liens et de la Barre de Navigation*/
#barre_nav li, #barre_nav li {
display: inline-block;
float: none;
padding-top: 10px;   /* Espace au-dessus des liens */
padding-bottom: 10px;   /* Espace en-dessous des liens */
padding-right: 15px;   /* Espace à droite des liens */
padding-left: 15px;   /* Espace à gauche des liens */
margin: 0px;
}

/* Menus déroulants
----------------------------------------------- */
#barre_nav li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;               /* Largeur de la barre des sous-catégories */
padding-top: 10px;    /* Distance entre barre des sous-catégories et barre de navigation */
z-index: 9999;
}

#barre_nav li:hover ul {
display: block;
margin-top: 0px;
margin-left:  -15px;        /* Alignement avec le lien de la barre de navigation */
}

#barre_nav li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 150px;                  /* Largeur de la barre des sous-catégories */
}

#barre_nav li:hover li a {
background-color: #ffffff;    /* Couleur du fond du lien */
}

#barre_nav li ul a {
display: block;
height: auto;
margin: 0px;
padding-top: 5px;              /* Distance au dessus des liens */
padding-bottom: 5px;       /* Distance en dessous des liens */
padding-left: 10px;             /* Distance à gauche des liens */
text-align: left;
}

#barre_nav ul ul a {
color: #525252;             /* Couleur des liens */
}

#barre_nav li ul a:hover, #barre_nav li ul li:hover > a {
color: #000000;               /* Couleur des liens quand survolés par la souris */
background-color: #ffffff;    /* Couleur du fond du lien quand survolés par la souris */
text-decoration: none;
}
Les codes sont presque les mêmes. La seule différence c'est que ".tabs-inner" et ".tabs-inner .widget" des premières lignes ont été remplacés par "#barre_nav".

Vous pouvez donc simplement remplacer chaque première ligne de votre ancien code par ces nouvelles lignes, ou alors tout remplacer par l'ensemble de ce nouveau code et changer les paramètres que vous souhaitez.

A noter que j'ai ajouté un nouveau code au tout début :
/* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
div#barre_nav {
margin-top: -10px; /* Espacement avant la Barre de Navigation */
margin-bottom: 20px; /* Espacement après la Barre de Navigation */
}
Ce code permet de définir l'espacement avant et après la nouvelle barre de navigation.
Une valeur en pixels positive (20px) ajoutera un espace, tandis qu'une valeur négative (-10px) supprimera de l'espace.
Ici en définissant un espacement avant (margin-top) négatif, on déplace la barre de navigation vers le haut.

A vous de jouer avec tous ces paramètres pour obtenir ce qui vous plait :)

Si vous avez besoin d'aide, ou ne savez plus à quoi correspond les différents paramètres, je vous conseil de relire le tutoriel sur la personnalisation de la barre de navigation qui reprend tous ça ;)

Bon blogging !

Autres articles

117 commentaires:

  1. Merciiiiiii beaucoup ! :)

    http://mademoiselleperrier.blogspot.fr/

    RépondreSupprimer
  2. Tout d'abord, merci mille fois de nous donner autant d'astuces. Ton blog est super bien fait, et chaque fois que j'ai suivi tes conseils, j'ai réussi à obtenir ce que je voulais.
    Si jamais tu avais envie de faire un article pour nous expliquer comment changer l'apparence du bloc commentaire (ou simplement comment changer le terme commentaire) ce serait top.
    J'ai écumer le web pour trouver une explication bien réalisée et je n'ai rien trouvé.
    Bonne continuation à toi et à ton blog :)
    Bises,
    M.
    http://dmedr.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Je suis contente de pouvoir aider ! :)
      Je note l'idée de tutoriel, je vais voir ce que je peux faire ;)

      Supprimer
  3. Merci pour se tutos encore une fois j'apprend toujours de chouette code css haha
    Si c'est possible pourquoi ne pas faire un tuto pour "lire la suite" comment le customiser avec un défilement d'image ?

    RépondreSupprimer
    Réponses
    1. C'est une très bonne idée, je note ! :)

      Supprimer
  4. Salut ma jolie,
    merci infiniment pour tes merveilleux conseils! Quant à moi, après avoir épluché l'intégralité du WEB, j'aimerais savoir si tu sais comment modifier l'apparence de la partie "commentaire", style avec un endroit pour mettre ton site web, prénom nom et enfin ton commentaire puis "envoyer!"
    Merci d'avance
    Justine du blog dans-lesplacardsdejustine.blogspot.com

    RépondreSupprimer
    Réponses
    1. Ce serait très intéressant, mais ce n'est pas si simple à faire sur Blogger. J'ajoutes ça à ma liste de tutos à faire ;)

      Supprimer
  5. bonjour, et merci pour tout tes tutos.
    J'ai un soucis avec celui ci, barre ce met a la verticale saurais tu pourquoi?
    Merci

    RépondreSupprimer
    Réponses
    1. Bonsoir Peggy,
      L'as-tu appliqué à ton blog ? Car je ne vois pas le problème :/
      Vérifie bien que tu as remplacé les codes CSS de ton ancien menu par les nouveaux :)

      Supprimer
  6. Bonsoir,
    excuses moi de te déranger, j'ai un petit soucis. Il se trouve que j'ai bien appliquer tes conseils et j'ai obtenue le résultat voulu cela dit j'aimerais que ma barre de catégories soit en dessous de mon en-tête. Comment faire?

    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Laëtitia,
      Pas de problème, si tu veux simplement créer une barre de navigation en dessous de ton en-tête alors il faut plutôt suivre les tutoriels suivants :

      Créer la barre de navigation :
      http://ladybirdr.blogspot.com/2014/02/customiser-son-blogger-la-barre-de.html

      Personnaliser la barre de navigation :
      http://ladybirdr.blogspot.com/2014/03/customiser-son-blogger-la-barre-de.html

      Tu n'aura donc pas besoin de déplacer ta barre de navigation au-dessus de l'en-tête :)

      Supprimer
  7. Bonjour, merci pour ce tuto mais j'ai un petit problème : mon blog affiche le menu en liste au dessus de mon Header, et changer le CSS n'arrange rien .. aurais-tu une idée pour arranger tout ça ?

    RépondreSupprimer
    Réponses
    1. Bonjour Clémence, as-tu réglé le problème ? Car il apparaît bien à l'horizontale sur mon ordi :)

      Supprimer
    2. Oui finalement j'ai un peu bidouiller et directement appliquer ton code pour la fixer et du coup ça marche ;)

      N'aurais-tu pas un tuto pour ajouter une barre de rechercher ou des icon dans le menu ?
      J'ai fait quelque recherche et j'avais "réussi" à le faire mais du coup ma barre n'était pas pleine/complète ..

      Oh et j'attend avec impatiente ton article pour les Newsletter

      Supprimer
    3. J'ai un tutoriel qui explique comment ajouter des images au menu : http://ladybirdr.blogspot.com/2014/10/ajouter-des-images-la-barre-de.html
      Par contre je n'ai pas encore fait de tutoriel pour insérer une barre de navigation dans le menu. Mais c'est en projet ;)

      Supprimer
  8. Bonjour!
    Voilà j'ai rajouter une barre de navigation à celle que j'avais déjà pour pouvoir mettre mes boutons de réseaux sociaux, sauf que les codes de mon CSS s'applique aussi à cette barre là et du coup impossible de modifier l'espace entre mes boutons sans que ça s'applique à l'autre côté de ma barre! Est-ce que tu saurais me dire comment faire?
    Merci d'avance!
    http://des4lem.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Kévin,
      Il te suffit de nommer ta 2e barre de manière différente de la première. Pour cela, dans le code HTML de ta 2e barre de navigation, à la ligne :

      <div id="barre_nav">

      Remplaces barre_nav par un autre nom, barre_nav2 par exemple, ce qui donne :

      <div id="barre_nav2">

      Pour modifier l'apparence de cette 2e barre, tu peux reprendre les codes CSS de la première barre. Copies-les et colles-les à la suite en remplaçant tous les barre_nav par barre_nav2.
      Tu peux maintenant apporter les modifications à cette nouvelle barre de navigation sans altérer l'apparence de la première :)

      Supprimer
    2. Génial! Merci beaucoup j'ai réussis! Comme d'habitude, ton aide m'a été précieuse et je t'en remercie! :)
      Est-ce qu'il est possible de faire en sorte que mes barres de navigations prennent toute la largeur sans qu'elle soit placée tout en haut??

      Supprimer
    3. Pas de soucis ^^
      En fait on est obligé de déplacer le menu hors du cadre du contenu du blog. Par défaut le menu est à l'intérieur de cette partie "contenu" qui définit la largeur maximale du blog.
      Par contre tu peux déplacer ton header (ou en-tête de blog) avec le menu, comme ça ton menu restera sous celui-ci. C'est exactement ce que j'ai fait sur mon blog :)
      Pour déplacer ces sections, il faut reprendre la technique que tu as utilisée pour le footer.
      Le code correspondant à ton en-tête commence par :

      <header>

      Et le code de tes menus commence par :

      <div class="tabs-outer">

      Par contre, il faudra sûrement jouer sur la largeur de ton header pour que ton fond apparaisse toujours sur les côtés.

      Supprimer
    4. D'accord! Mais du coup je dois les placer ou ces sections?

      Supprimer
    5. Au final je pense avoir réussi, sauf que j'ai un soucis avec la barre de navigation! Je n'arrive pas à la centrer et à relier la barre de droite à celle de gauche ...

      Supprimer
    6. Oui, en fait il faut rajouter un contenant autour des 2 barres. Rajoutes :

      <div id="nav_barres">

      Avant le code HTML du premier menu, et le code suivant :

      </div>

      Après le code HTML du 2e menu.

      Ensuite il faut définir une largeur maximale des 2 barres, et changer plusieurs paramètres. J'ai ajouté 2 codes pour ce nouveau contenant (nav_barres) et corrigé certains de tes codes CSS :

      #nav_barres {
      width: 100%;
      position: relative;
      background: #222;
      text-align: center;
      margin-bottom: 200px;
      height: 50px;
      }

      #nav_barres div {
      vertical-align: top;
      }

      #barre_nav {
      margin: 0;
      width: 75%;
      display: inline-block;
      position: relative;
      max-width: 1054px;
      }

      #barre_nav ul {
      overflow: visible;
      }

      #barre_nav li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -16px;
      }

      #barre_nav ul {
      font-family: Oswald;
      background-color: #222222;
      margin-top: 0;
      margin-bottom: 0px;
      margin-left: 0;
      margin-right: 0;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-width: 1px;
      }

      .navleft {
      text-align: left;
      padding: 0;
      }

      #barre_nav li:first-child {
      margin-left: 0;
      }

      #barre_nav li, #barre_nav li {
      display: inline-block;
      float: none;
      padding-top: 19px;
      padding-bottom: 15px;
      margin-right: 40px;
      margin-left: 40px;
      font-family: Oswald;
      line-height: 1.4em;
      position: relative;
      left: 0;
      }

      #nav_barres div {
      vertical-align: top;
      }

      #barre_nav2 {
      width: 10%;
      display: inline-block;
      position: relative;
      right: 0;
      padding: 0;
      margin: 0;
      max-width: 136px;
      }

      #barre_nav2 ul {
      overflow: visible;
      }

      #barre_nav2 ul {
      font-family: Oswald;
      background-color: transparent;
      opacity: .93;
      margin-top: 0;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-width: 1px;
      padding: 0;
      }

      .navright {
      text-align: right;
      }

      #barre_nav2 li, #barre_nav2 li {
      display: inline-block;
      float: none;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-right: 0px;
      margin-left: 0;
      font-family: Oswald;
      line-height: 1.4em;
      position: relative;
      left: 0;
      }

      Ça devrait marcher avec ça ;)

      Supprimer
    7. C'est parfait! :O Milles mercis!!!
      J'en profite pour te demander une dernière "petite chose" hors sujet avec la barre de navigation ... J'essaie désespérément de séparer les "blocs" de ma sidebar avec des espaces en transparence, idem avec mes posts, sauf que j'ai beau tout essayé, je n'y arrive pas du tout! Saurais-tu me dire comment faire?

      Supprimer
    8. Bonjour Catherine! Sur ce super tuto je t'avais demandé si il était possible de faire en sorte que ma barre de navigation prenne toute la largeur de ma page SANS qu'elle reste fixée en haut! Et bien au final j'aimerais la fixer en haut, sauf que j'ai beau bidouiller et relire tes tutoriels, je n'arrive pas à la fixer tout en gardant mes 2 barre nav coller l'une à l'autre! Saurais tu comment faire? Merci d'avance! :)

      Supprimer
    9. Bonjour Kévin,
      Changes ton code suivant :

      #nav_barres {
      width: 100%;
      position: relative;
      background: #222222;
      text-align: center;
      margin-bottom: 100px;
      height: 50px;
      }

      Pour :

      #nav_barres {
      width: 100%;
      position: fixed;
      background: #222222;
      text-align: center;
      margin-bottom: 100px;
      height: 50px;
      top: 0;
      z-index: 9999;
      }

      Maintenant cherches le code qui commence par :

      body {

      Remplaces la ligne :

      margin-top: -30px;

      par :

      margin-top: 0;

      Et voilà ;)

      Supprimer
    10. Oh bah génial! ^^ Merci milles fois!! :)

      Supprimer
  9. Bonsoir Catherine,
    Me voilà de retour avec une nouvelle question. J'ai placé ma barre de menu au-dessus de ma bannière, et j'aimerais qu'elle soit systématiquement visible quand on scroll. J'imagine que je dois utiliser la balise position: fixed; mais je n'arrive pas à trouver où la placer dans le code.

    J'espère que tu pourras m'aider, et merci encore de tes précieux conseils !

    Ophélie

    RépondreSupprimer
    Réponses
    1. Bonjour Ophélie, c'est effectivement ce code qu'il faut utiliser ! :)
      J'ai fait un tutoriel qui explique comment fixer la barre de navigation en haut du blog ici : http://ladybirdr.blogspot.com/2014/12/fixer-la-barre-de-navigation-en-haut-du.html

      Supprimer
  10. Re-Hello,
    Aujourd'hui je te dérange !!! Merci pour ce tutoriel grâce à toi j'ai une barre de navigation digne de ce nom avec des sous-catégories.
    J'ai juste un souci : comment fait-on pour que la barre de navigation soit sur toute la longueur de la page ? Je ne sais pas si je m'exprime bien : http://gameofbeautymode.blogspot.fr/
    Comme tu peux le voir sur mon blog, j'ai une marge blanche à gauche et à droite de ma barre de navigation et j'aimerais que ce ne soit plus le cas ? Comment faire ?

    Merci d'avance pour ta réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour Olivia,
      Pour que ton menu prennes toute la largeur, il faut déplacer le code HTML du menu juste après le code suivant :

      <div class="content">

      Et changer le code CSS suivant :

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

      Par ceux-ci :

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

      header {
      margin-top: 58px;
      }

      Et voilà :)

      Supprimer
    2. Bonsoir,
      Merci beaucoup, ça fonctionne.
      Merci encore.
      Bonne fin de soirée.

      Supprimer
  11. Bonjour,
    J'aimerais savoir comment retirer l'accueil au bas de ma page, puisque je l'ai dans mon menu déroulant
    Car du coup cela me mets aucun article et cela fait pas top
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour, je t'ai envoyé un e-mail ;)

      Supprimer
  12. Bonjour !

    Je fais de nouveau face à un petit souci.
    Les sous-sous-listes (et sous-sous-sous-listes...) sont décalées par rapport aux sous-listes d'avant.
    C'est observable dans Voyages > Europe > France > Paris. J'ai essayé de bidouiller mais ça ne bouge pas d'un poil :(

    En espérant que tu puisses m'aider !

    Merci d'avance

    http://testdancinginnowhere.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marie-Charlotte,
      Essaye de remplacer :

      #barre_nav ul ul ul {
      position: absolute;
      left: 165px;
      margin-top: -40px !important;
      top: auto;
      }

      Par :

      #barre_nav ul ul ul {
      position: absolute;
      left: 165px;
      margin-top: -35px !important;
      top: auto;
      }

      Si tu souhaites décaler à gauche ou à droite modifie la valeur de -15px du code :

      #barre_nav li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px;
      }

      Supprimer
  13. Merci beaucoup, tu m'as encore une fois sauvé la vie ;) merci encore pour tes tutoriels !

    RépondreSupprimer
  14. bonjour
    ma barre est bien en haut mais elle descend avec l'ascenseur j'ai dû encore loupé un code!
    d'autre part j'ai le mot accueil en bas de page qui renvoie à rien comment le supprimer ?
    merci tout plein

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Commence par supprimer ce code :

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

      Et ensuite suit ce tutoriel ;)

      Pour le mot Accueil en bas de la page c'est normal il fait partie de tes liens de navigation : Articles plus récents, Accueil, Articles plus anciens.
      Si tu veux vraiment enlever ce lien Accueil, tu peux le cacher en rajoutant ce code :

      a.home-link {
      display: none;
      }

      Avant le ligne /* Content

      Supprimer
  15. merci le lien est cache tu me dis de suivre ce tuto mais lequel? vraiment je suis une quiche merci pour ton aide et ta patience!

    RépondreSupprimer
    Réponses
    1. C'est celui-ci sur lequel on se trouve : "Déplacer la barre de navigation au-dessus du titre du blog" ;)

      Supprimer
  16. Bonjour !

    Je fais face à un problème en faisant la marche à suivre..
    Si tu veux en faisant ce que tu as fait ça me met :

    .
    .
    .

    <----- NOM DE MON BLOG ---->

    <----- B A R R E D E N A V I G A T I O N ----->

    En gros, ça me met 3 points sur la gauche ! Ça ne me met pas la deuxième barre de navigation comme toi :/
    J'aimerai bien t'envois un screen pour te montrer, ça serait bien plus clair ! Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Gael,
      Une fois le code du menu déplacé, as-tu bien modifié les codes CSS pour modifier son apparence ?

      Supprimer
  17. si c'est possible pourrais-tu me dire comment je pourrais faire pour mettre la barre sous le titre du blog? merci infiniment pour ta générosité à partager ton savoir

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le menu devrait être par défaut sous l'en-tête du blog. La partie header devrait contenir ton en-tête avec ton titre, et la partie crosscol (sous le header) devrait contenir ton menu.

      Supprimer
  18. Bonjour Catherine,

    J'ai un léger soucis avec ma barre de navigation. J'ai bien réussis à la placer au dessus du titre, cependant la police que j'écris dans mon HTML n'est pas prise en compte (j'utilise pourtant un police de Blogger)..
    Peut-être ai-je oublié une étape, mais je ne trouve pas laquelle..

    Je te laisse le lien de mon blog afin que tu puisses voir : http://pinkly-punk.blogspot.fr

    Belle journée,
    Marion.

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Le problème vient de ce code :

      /* Police et Couleur des Liens */
      #barre-nav li a {
      font-family: Calibri;
      font-size: 14px;
      text-decoration: none;;
      color: #B7B4B7
      }

      Tu as écris barre-nav au lieu de barre_nav, du coup aucun code CSS de ce code ne s'applique à ton menu ;)
      De plus, il y a un signe ; en trop à la fin de la ligne :

      text-decoration: none;;

      Supprime ce signe en trop, et rajoute ce même signe manquant à la ligne :

      color: #B7B4B7

      Pour donner :

      /* Police et Couleur des Liens */
      #barre_nav li a {
      font-family: Calibri;
      font-size: 14px;
      text-decoration: none;
      color: #B7B4B7;
      }

      Et voilà ;)

      Supprimer
  19. Bonsoir Catherine,
    Tout d'abord merci pour tous ces tutos formidables. Mais en tant que novices je galère lol.

    J'ai réussi a créer ma barre de navigation grâce à ton tuto sur le sujet.
    Ensuite j'ai voulu faire ce tuto et là ça coince. Si je copie le code html de ma barre telle-quelle et bien elle s'affiche en colonne. En bidouillant j'ai réussi à la mettre en ligne mais du coup elle s'est placée tout à gauche et elle est tte petite.

    J'ai voulu mettre ton code CSS et c'est exactement là que je bugg. Je pense avoir bien modifié la police et couleur comme ma barre de base mais rien ne se passe, la barre ne bouge pas.

    Pour etre précise j'ai mis ton code CSS ds "ajouter code css" dans la partie "personnalisé" et là j'ai un doute. Est ce bien là qu'il fallait le mettre ?!

    Bon après je ferais ton tuto pour la fixer et y mettre mes boutons reseaux sociaux mais c'est une autre histoire lol.

    Merci d'avance pour ton aide.
    Jessica.

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Il vaut mieux placer les codes CSS directement dans le code CSS de ton thème. Pour cela va 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 à la suite.

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

      /* Content

      Appuie sur Entrer pour trouver cette ligne.
      Tu peux coller tes codes CSS au-dessus de cette ligne ;)

      Supprimer
    2. Bonjour Catherine,

      Merci pour cette réponse que je n'avais pas vu :/

      Alors je viens de refaire toutes ces modifs avec ces derniers conseils et c'est presque bon.

      J'ai réussi à mettre la barre de Navigation en haut mais je n'arrive pas à la personnaliser, j'ai beau recopier les anciens paramètres de mon "ancienne" barre et rien ne change :/

      En espérant que tu puisses de nouveau m'aider, merci par avance.
      Je vais aussi répondre à ton mail ;)
      Jessica

      Supprimer
    3. Re

      Finalement c'est bon j'ai réussi en lisant les coms, je me suis rendu compte que je n'avais pas bien copier le code html du menu.

      Merci <3

      Supprimer
  20. Bonjour,

    J'ai un problème concernant ce tuto,
    Lorsque j'applique au blog, j'obtiens bien une deuxième barre de navigation mais celle ci se place en haut à gauche avec un système de listes avec des puces.
    J'aurai souhaité obtenir la même barre de navigation que j'avais sous mon titre.. Merci d'avance pour ton aide ! :))

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      As-tu bien utilisé le nouveau code CSS donné à la fin du tutoriel pou garder l'apparence du menu ?

      Supprimer
  21. Bonjour Catherine, merci beaucoup pour tous ces tutos.
    J'en ai utilisé certains pour mon blog, notamment pour avoir une barre de navigation en haut. Seulement je m'aperçois aujourd'hui, que si j'ouvre mon blog pour la première fois, la barre qui parle des cookies se retrouve à moitié en dessous de ma barre de titre, on ne peut pas cliquer sur "ok" et ça cache même un peu mon titre... Je vois que pour ton blog, la barre d'infos sur les cookies est en bas, cette solution me conviendrait bien, mais je n'ai aucune idée de comment faire... Tu aurais des conseils ?
    Voilà mon blog si mon explication n'est pas claire : http://vacterlauquotidien.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Vincent,
      J'ai fait un tutoriel sur le sujet : http://ladybirdr.blogspot.com/2015/07/comprendre-et-modifier-la-barre-de.html
      Tu peux trouver un index de mes tutoriels en cliquant sur le lien Tutoriels de mon menu ;)

      Supprimer
  22. Merci beaucoup pour tout ces conseils :)

    RépondreSupprimer
  23. Bonjour Catherine,
    J'ai essayé de déplacer ma barre de navigation, mais lorsque je le fais, tout mon menu déroulant s'affiche à la verticale en haut du titre du blog. Saurais-tu comment faire pour y remédier? merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      C'est normal il faut modifier les codes CSS de ton menu et menu déroulant pour ceux donnés à la fin du tutoriel ;)

      Supprimer
  24. Bonjour,

    J'ai un problème avec mon code, je ne sais pas trop où je dois le modifier, mais le menu apparaît bien en haut cependant : impossible de le fixer (je ne trouve pas les endroits où appliquer le code), mais il empiète aussi sur la bannière du blog.. Comment faire pour qu'il soit fixe en haut, et sans dépasser sur le titre ? Merci d'avance..

    RépondreSupprimer
    Réponses
    1. Bonjour Sasha,
      Peux-tu me donner le lien vers ton blog pour que je puisse y jeter un œil ?

      Supprimer
    2. http://equideowls.blogspot.fr/

      voilà :) pardonnez moi j'ai oublié !

      Et savez-vous si on peut paramétrer une page d'accueil qui soit la même tout le temps, un peu comme un site ?

      Merci d'avance !

      Supprimer
    3. Bonjour Sasha,
      Comme tu as déplacé ton menu au-dessus de ton en-tête, le code donné dans le tutoriel pour le fixer en haut du blog ne marchera pas.
      Retrouve ce code CSS :

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

      Remplace la ligne :

      position: absolute;

      Par :

      position: fixed;


      Ensuite tu as défini un espace de -50 pixels au-dessus de ton en-tête, or ceci déplace ton en-tête en haut du blog, donc sous le menu. Retrouve ce code CSS :

      header {
      margin-top: -50px;
      }

      Remplace -50px par 0 ou une valeur positive pour déplacer l'en-tête vers le bas ;)

      Supprimer
    4. ça fonctionne parfaitement, merci beaucoup !

      Supprimer
  25. Bonjour Cath , Merci pour le tuto !
    J'ai tout fait mais j'ai un problème: il y a un espace entre le haut de mon blog et ma barre, et il y a aussi un espace à droite et à gauche !
    En lisant les commentaires, je ne trouve pas de répondes car je ne trouve pas les parties dans lesquelles tu dis qu'il faut ajouter les codes !
    Merci de ta réponse
    Bises et bonne année ♥

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Rajoute ce code CSS :

      .tabs.section {
      margin: -30px 0 0 0;
      }

      Juste avant la ligne :

      /* Content

      Et voilà ;)

      Supprimer
  26. Bonjour, tout d'abord merci pour tout tes supers tutos !
    Cependant j'ai un petit problème... J'ai appliqué tes infos à la lettre, j'ai effectivement une 2ème barre de navigation sauf qu'elles sont toutes les deux en-dessous de mon en-tête :

    http://cocooning-andco.blogspot.fr/

    Pourrais-tu m'aider?
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Amandine,
      Il me semble que tu as réglé le problème, ton menu s'affiche bien en haut de la page ;)

      Supprimer
  27. Bonsoir!

    J'ai fait ce tutoriel après avoir fait tous les autres. (J'avais mal lu le titre, je cherchais autre chose mais au final, ça a fait un rendu qui se rapproche de ce que je cherchais). Ce qui m'a donné ça: http://testanska.blogspot.fr/
    Du coup, j'aimerais savoir comment faire pour que mes deux barres nav soit sur la même et unique ligne. Et comment, faire en sorte de retrouver ce menu sur mon blog "réel" (et pas les versions test), c'est-à-dire celui-ci: http://anskarad.blogspot.fr/ ? :/

    Je ne sais pas si c'est compréhensible, mais j'espère. ^^'

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient simplement du fait que tous tes liens prennent trop de place par rapport à la largeur de ton menu. Comme ils dépassent, les boutons vers les réseaux sociaux sont renvoyés à la ligne. Réduit les marges (margin ou padding selon ce que tu utilises) autour de tes liens ET des boutons vers les réseaux sociaux.

      En supprimant la ligne :

      margin-right: 20px;

      De ton code CSS, comme expliqué dans ma réponse à ton autre commentaire, cela devrait suffir ;)

      Supprimer
    2. J'ai réussi, merci! :3

      Supprimer
  28. Hello! Tout d'abord, un GRAND merci pour tous ces tutos super!! Ils m'aident tellement, je ne sais pas comment j'aurais fait mon blog sans eux... ^^
    Cependant j'ai deux petits problèmes, la bordure de mon menu ne prend pas toute la page ainsi que mon pied de blog... Je ne sais pas comment faire... Ainsi que pour les commentaires, j'ai suivi tes tutos pour modifier la police et les bordures mais rien n'a changé... Si tu peux m'aider pour tout ça... MERCI BEAUCOUP !

    http://maurinesdiary.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Maurine,
      Il y a une marge autour de ton blog qui empêche le pied de page et ton en-tête de prendre 100% de la largeur de la page. Pour régler ce petit problème, retrouve cette ligne :

      ]]></b:skin>

      Juste avant cette ligne colle :

      .region-inner.footer-inner {
      padding: 0 !important;
      }

      #footer-1 {
      margin: 0 !important;
      }

      body {
      padding: 0 !important;
      }

      Pour les commentaires, j'ai trouvé une petite erreur dans ton code CSS. Retrouve cette ligne :

      /* Rectifie l'alignement centré des boutons de partage */

      Juste au-dessus tu devrais trouver :

      .post-footer a {
      color: #000000; /* Couleur des liens */
      .post-footer a:hover {
      color: #C8C3C8; /* Couleur des liens au survol de la souris */
      text-decoration: none; /* Supprime le soulignement du texte au survol de la souris */
      }

      Le code CSS commençant par ".post-footer a {" n'est pas fermé. Il manque le signe }. Ajoute ce signe avant la ligne :

      .post-footer a:hover {

      Comme ceci :

      .post-footer a {
      color: #000000; /* Couleur des liens */
      }

      .post-footer a:hover {
      color: #C8C3C8; /* Couleur des liens au survol de la souris */
      text-decoration: none; /* Supprime le soulignement du texte au survol de la souris */
      }

      Si le problème persiste, il faut vérifier qu'il ne manque pas de signe : ; { } /* ou */ dans tes codes CSS. Regarde dans les codes pour tes commentaires mais aussi tous ceux qui se trouvent avant. Un simple oubli de signe, ou un signe en trop, et tous les codes CSS qui suivent peuvent être mal, ou pas, pris en compte par le navigateur ;)

      Supprimer
    2. Super pour les marges ça a fonctionné, merci beaucoup c'est tellement plus joli comme ça ! :)

      Pour ce qui est du signe } j'avais également vu que ma ligne n'était pas fermée mais quand je la ferme mon menu disparait, mes titres de la barre latérale ne sont plus comme je veux et la barre du pied de page ne prend plus toute la longueur... Je ne sais pas quoi faire :( J'ai vérifié s'il ne manquait pas le signe } plus haut dans mon code mais non, toutes mes lignes sont bien fermées...

      Supprimer
    3. Bonjour Maurine,
      Pour modifier les commentaires il faut fermer le code qui ne l'est pas. Les codes CSS des commentaires sont à la suite et pas pris en compte à cause de l'erreur.

      Supprimer
    4. Le problème c'est que quand je ferme le code ça me modifie bien mes commentaires mais mon menu disparait... J'ai déjà fait ça plein de fois. Ce que je ne comprends pas c'est que les codes pour mon menu sont avant les codes pour les commentaires donc je ne comprends pas pourquoi ça me supprime mon menu quand je ferme le code des commentaires...
      Je suis désolée de t'embêter avec ça..

      Supprimer
    5. Bonjour Maurine,
      En regardant ton code CSS, le menu doit être caché par ton en-tête quand tu corriges ton code CSS.
      Le problème vient de ces codes :

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
      background-color: #ffffff !important; /* Couleur de fond */
      color: #000000; / * Couleur de la police */
      }
      header {
      background-color: #ffffff; /* Couleur de fond de l'en-tête */
      margin-top: -100px; /* Espace au-dessus de l'en-tête */
      }

      En supprimant l'espace entre / et * à la ligne :

      color: #000000; / * Couleur de la police */

      Le code qui le suit est pris en compte, sauf que ce code déplace ton en-tête de 100 pixels vers le haut de la page, et donc cache ton menu.

      Il te suffit de remplacer la ligne :

      margin-top: -100px; /* Espace au-dessus de l'en-tête */

      Par :

      margin-top: 0; /* Espace au-dessus de l'en-tête */

      Et voilà ;)

      Supprimer
    6. MERCIIIIIII tout est PARFAIT maintenant !!! Merci infiniment :D

      Supprimer
  29. Bonsoir Catherine, je t'ai laissé un commentaire sur l'article "exemple de CSS pour menu", n'en tiens pas compte, j'ai trouvé la solution ! :)
    Cependant en corrigeant ce problème, j'ai dû faire une erreur quelque part et mon menu s'est mis en liste. Il est sur 7 lignes (une ligne par catégorie en fait), alors que je souhaiterai qu'il soit sur une seule ligne..
    Voici le code :

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

    /* Espacement et Bordure du Dernier Lien de la Barre de Navigation */
    #barre_nav .section:last-child li {
    padding-right: 0px;
    }

    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    #barre_nav .section:first-child li {
    padding-left: 0px;
    }

    /* Fond et Bordure de la Barre de Navigation */
    #barre_nav ul {
    text-align: center;
    background-color: #fff;
    padding: 0;
    margin: 0;
    }

    /* Police et Couleur des Liens */
    #barre_nav li a {
    font-family: Liberation Sans Narrow;
    text-transform: uppercase;
    font-size: 20px;
    color: #000000;
    text-decoration: none;
    margin-right: 20px;
    }

    /* Police et Couleur des Liens quand Survolés par la Souris */
    #barre_nav li.selected a, #barre_nav li a:hover {
    color: #fb9274;

    /* Couleur du Fond des Liens quand Survolés par la Souris */
    #barre_nav li:hover {
    background-color: #ffffff;
    }

    /* Visibilité de la Bordure des Liens */
    #barre_nav ul {
    overflow: visible;
    }

    /* Centrer la Barre de Navigation */
    #barre_nav li, #barre_nav li {
    display: inline-block;
    float: none;
    }

    En espérant qu'une solution existe..

    Belle soirée :)

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Je vois 2 erreurs dans ton code. Il manque un signe / à la fin de :

      /* Tabs
      ----------------------------------------------- *

      Rajoute-le, comme ceci :

      /* Tabs
      ----------------------------------------------- */

      Ensuite un code CSs n'est pas fermé, il manque le signe } au code suivant :

      #barre_nav li.selected a, #barre_nav li a:hover {
      color: #fb9274;

      Rajoute un signe } avant :

      /* Couleur du Fond des Liens quand Survolés par la Souris */

      Comme ceci :

      #barre_nav li.selected a, #barre_nav li a:hover {
      color: #fb9274;
      }

      /* Couleur du Fond des Liens quand Survolés par la Souris */

      Supprimer
    2. Merci beaucoup, ça a fonctionné ! :)

      Supprimer
  30. Bonjour Catherine,

    D'abord un grand merci pour vos tutos toujours plus géniaux les uns que les autres et pour explications hyper claires!!!
    je suis en train de revoir le design de mon blog (rosesetconfettis.blogspot.fr) et impossible de mettre la barre de navigation en haut et de changer le fond?
    Pouvez vous m'aider?
    Merci et bonne journée

    RépondreSupprimer
    Réponses
    1. Bonjour,
      A quel endroit cela bloque ? Car effectivement ton menu n'a pas bougé.

      Supprimer
    2. Hello Catherine, tu vas bien ?
      Je t'ai envoyé un mail hier pour une demande de devis concernant mon blog (sorry4thedelay.blogspot.fr), pourrais-tu y jeter un coup d'oeil stp ? Vu le travail de qualité que tu fourni, j'aimerai avoir à faire à toi !

      Mon mail : contact100pixels@gmail.com

      Je te remercie par avance !

      Supprimer
    3. Bonjour Gaël,
      Je t'ai envoyé une réponse par email ;)

      Supprimer
  31. Hello! Tout d'abord j'adore ton blog, il est super et m'aide beaucoup.
    Mais, j'aurai une question : toute a l'heure en voulant remonter ma barre de navigation j'ai effacé la "photo titre" de mon blog... Je ne sais pas comment la remettre... Si tu pouvais m'aider ça serait super...
    Mon email : pimboly25@hotmail.fr
    Mon blog (en construction) : http://blabladeva.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réussi à régler le problème ?

      Supprimer
  32. Bonjour, je ne trouve pas l'espace dans mon code correspondant aux cookies et ça cache mon menu quand on ouvre mon blog "http://15bis.blogspot.fr/". Vous auriez une solution? Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour Amélie,
      Il n'y a pas de codes CSS par défaut pour la barre de cookies. Il faut les rajouter manuellement. Suit ce tutoriel : Comprendre et modifier la barre de cookies de Blogger

      Supprimer
  33. Bonjour Catherine et merci beaucoup pour le tuto! J'ai fait comme tu nous as expliqué , mais la barre de navigation s'affiche en-dessous du titre de mon blog, pas au dessus. As-tu une explication? Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant ton blog, le code de ton menu n'a pas été déplacé. Essaie à nouveau. Il faut coller le code du menu au-dessus de la ligne :

      <header>

      Supprimer
  34. Bonjour,
    merci beaucoup pour tes ton travail que tu nous fais partager.
    J'ai juste un problème en voulant faire ce auto j'ai ceci qui est apparut en haut à gauche de mon blog et je ne sais d''où ça sort :
    .Accueil
    .Pinterest
    .E-mail
    et mon titre reste toujours en haut mais en dessous de ce truc.
    Merci d'avance pour ta réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour Léanne,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
  35. Bonjour Catherine,

    Je suis desesperee , j ai reussi a deplacer ma barre de navigation mais j ai du mal a lui definer des parametres visuels, j ai carrement copier-coller celui du tutorial pour voir si ca marche mais rien. J 'ai colle sous */ Tabs.
    Et merci de nous imformer des que possible a quand les demandes de devis seront ouvertes.

    Cordialement!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
  36. Merci encore pour tout tes conseils, c'est grâce à eux que j'ai arrangé mon blog ! Voilà j'ai testé ton astuce mais hélas à l'étape où on doit se retrouver avec deux barres de navigation, celle qui est sensée être en haut n'est pourtant pas au-dessus du titre de mon blog :/ Je te donne l'adresse de mon blog, pour que tu voies un peu comment il est fait x) http://la-plume-lucille.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Lucille,
      Souhaites-tu déplacer le menu ou le fixer en haut du blog ?

      Supprimer
    2. Bonsoir,

      Euh je pense le fixer en haut du blog.De la même façon que sur ton blog, de sorte que lorsqu'on fait défiler la page, le menu reste toujours sur le haut.

      Supprimer
    3. Bonjour Lucille,
      Il faut utiliser le tutoriel suivant pour fixer le menu en haut du blog ;) : http://ladybirdr.blogspot.com/2014/12/fixer-la-barre-de-navigation-en-haut-du.html

      Supprimer
  37. Bonjour Catherine. Cela fait 3 jours que j'ai découvert ton blog et merci mais vraiment merci pour tout ces tutos. Je n'y connais vraiment rien et je trouve ça assez sympa au final !
    Bon j'ai un petit soucis par contre : Je n'arrive pas à mettre le menu en haut du blog. Il reste en dessous de ma bannière. J'essaye de comprendre depuis plus d'une heure, mais je n'y arrive pas ahah. Pas de soucis de mise en page par contre.
    Mon blog c'est bordelutopique.blogspot.fr si tu peux y jeter un oeil et me dire si tu vois une explication ? Merci d'avance !

    RépondreSupprimer
  38. Bonjour Catherine,

    j'essaie désespérément de déplacer ma barre de menue en haut du blog, rien n'y fait : à chaque il y a un problème lorsque j'essaie de faire un aperçu, par exemple cette fois-ci il y a marquer "Impossible de charger l'aperçu du modèle : Erreur d'analyse XML, ligne 868, colonne 50 : Open quote is expected for attribute "href" associated with an element type "a".."
    Bref, je comprends pas pourquoi cela ne marche pas, apparemment je suis la seule à avoir ce problème ... :/
    J'espère que tu m'aideras, je te donne le lien de mon blog (en cours de construction ^^) http://leblogdelunatia.blogspot.fr/
    Voilà, merci d'avance !

    PS : j'adore ton blog, continues comme ça, il est très beau et très utile !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que du coup tu as opté pour fixer le menu en haut du blog ;)

      Supprimer
  39. Bonjour, merci pour tout vos tutos, conseils, et idées!! J'ai changer une première fois de place mon menu en le fixant en haut de page avec en plus un menu déroulant dans le menu déroulant, et parfait, j'ai réussi. J'ai souhaité en fait avoir mon menu au dessus du titre et que celui ci ne se déplace pas à la lecture du blog, mais je n'arrive plus à refaire mon menu déroulant dans le menu déroulant.Je n'ai plus d'idées sur ce qui a raté et je n'ai pas de connection internet souvent, alors j'en profite là. Je me demande aussi si c'est normal que mon menu figure seulement dans la page de modèle et plus comme widget dans mise en page. Merci
    www.bakeatomelo.blogspot

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton code actuel semble correct. Je vois bien tes menus déroulants et sous menus déroulants.
      Déplacer le code HTML du menu dans le modèle du blog ne gêne pas le thème ou le menu. Il faut simplement penser à le retrouver dans le modèle quand on veut le modifier :)
      Pour rajouter un nouveau menu déroulant (que ce soit dans un menu déroulant ou non, la méthode est la même) utilise le code HTML suivant :

      <ul>
      <li><a href="URLdulien">Texte du lien</a></li>
      </ul>

      Colle ce code avant le </li> du lien sous lequel tu souhaites afficher le nouveau menu déroulant.

      Par exemple :

      <li><a href="http://blog.fr/lien.html">Lien</a>
      <ul>
      <li><a href="URLdulien">Texte du lien</a></li>
      </ul>
      </li>

      Remplace URLdulien par l'adresse url du lien, et Texte du lien par le texte du lien ;)

      Supprimer
  40. Bonjour Catherine, encore une fois ;-)
    Je n'arrive pas cette fois-ci à changer la couleur de toute ma barre. Il n'y a que les catégories qui sont en gris, le milieu de la barre reste blanche. Commment faire pour que toute ma barre soit blanche?
    Du coup, quand je la fixe en haut (grâce à ton 2° tuto), ça fait tout moche, il n'y a que les catégories en gris.

    Merci!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que tu as résolu le problème ;)

      Supprimer
  41. Bonjour,

    J'ai un problème avec ma barre de navigation, il reste un espace entre ma barre, j'aimerai la fixer tout en haut, j'ai pourtant suivie tout le processus. J'ai essayer plusieurs manipulations en vain :/
    Merci d'avance :)

    http://klossie.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Klossie,
      Il y a un espace au-dessus de ton blog qui correspond à la Navbar Blogger ce qui créé cet espace au-dessus de ton menu. Pour supprimer cet espace ajoute le code CSS suivant :

      .content {
      margin-top: -30px !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Si tu souhaites fixer ton menu pour qu'il reste affiché en haut du blog même en descendant la page, alors il faut rajouter ce code CSS :

      #barre_nav {
      position: fixed;
      z-index: 99999;
      width: 100%;
      top: 0;
      }

      Il te faudra alors ajouter un espace au-dessus de ton en-tête qui reste d'être collé à ton menu. Ajoute ce code CSS :

      header {
      margin-top: 40px;
      }

      Et modifie la valeur de 40px pour celle qui te plaît ;)

      Supprimer
  42. Bonjour Catherine :)

    Merci pour tes supers tutos, c'est un plaisir de designer son blog;
    J'ai une petite question : pourquoi mon menu se présente en plusieurs lignes, j'ai essayé par tout les moyens de le mettre correctement mais je n'y arrive pas :(

    RépondreSupprimer
    Réponses
    1. Bonjour Mily,
      As-tu réussi à régler le problème ? Car sur ton blog les liens sont bien sur 1 ligne :)

      Supprimer
  43. Salut Catherine ! Merci 1000 fois pour tous tes tutos. J'ai essayé toute la soirée de mettre mon menu déroulant en haut de mon blog, mais je n'arrive pas. Je l'ai fait, mais d'une ca met des points entre chaque catégorie, et ensuite je n'arrive pas à les espacer entre eux (ils sont tous collés) et troisièmement, je n'arrive pas à les personnaliser.

    J'ai besoin d'aide !!!

    www.deuxsoeursunagenda.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Si tu as utilisé les codes CSS de mon tutoriel alors cela ne marchera pas avec ton menu car le nom de ton menu est différent de celui de mon tutoriel ;)
      Néanmoins, voici comment fixer ton menu en haut du blog :

      Retrouve ton code suivant :

      #cssnav {
      border: 70px;
      margin: 0px;
      padding: 0px;
      width: auto;
      font: normal normal 14px Cantarell; /* Personnaliser le modèle - permet de changer la police, taille, etc... */
      color: #444444; /* Personnaliser le modèle - permet de changer la taille */
      }

      Ajoute les lignes suivantes avant le signe }

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      background: #ffffff;
      overflow: visible;
      text-align: center;

      Comme ceci :

      #cssnav {
      border: 70px;
      margin: 0px;
      padding: 0px;
      width: auto;
      font: normal normal 14px Cantarell; /* Personnaliser le modèle - permet de changer la police, taille, etc... */
      color: #444444; /* Personnaliser le modèle - permet de changer la taille */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      background: #ffffff;
      overflow: visible;
      text-align: center;
      }

      Ensuite retrouve ce code CSS :

      #cssnav li {
      float: center;
      padding: 30px;
      }

      Remplace-le par :

      #cssnav li {
      float: none !important;
      padding: 20px 30px;
      display: inline-block;
      }

      Ensuite retrouve ce code :

      #cssnav li:hover ul {
      display: inline-block;
      }

      Remplace-le par :

      #cssnav li:hover ul {
      display: block;
      }

      Pour finir, on va déplacer l'en-tête vers le bas car le menu se retrouve par-dessus. Por cela ajoute le code suivant :

      header {
      padding: 40px 0 0;
      }

      Avant la ligne :

      /* Columns

      Et voilà ;)

      Supprimer
  44. Bonjour catherine,
    Tout d'abord merci mille fois pour tes tutos.
    Je cherche à remonter ma barre de navigation de quelques centimètres mais pas la mettre en haut. Est ce que tu saurais m'aider? $
    Merci encore

    RépondreSupprimer
    Réponses
    1. Bonjour Sophia,
      Si tu as créé ton menu avec mon tutoriel tu peux modifier la marge au-dessus de ton menu avec ce code CSS :

      #barre_nav {
      margin-top: -20px; /* Marge au-dessus du menu */
      }

      Remplace la valeur de -20px pour celle qui te plaît. Une valeur négative déplace le menu vers le haut alors qu'une valeur positive la déplacera vers le bas.

      Supprimer
  45. Bonjour Catherine!
    Comment faire pour que la barre de navigation apparaissent tout au long de la viste sur une page comme la tienne par exemple?car lorsque l'on navigue sur la page, la barre de navigation ne reste pas en haut, mais suit la page? merci de ton aide!

    RépondreSupprimer
    Réponses
    1. Bonjour Ade,
      Il faut suivre ce tutoriel pour fixer le menu en haut de la page : https://ladybirdr.blogspot.com/2014/12/fixer-la-barre-de-navigation-en-haut-du.html

      Attention, si tu as déjà suivi le tutoriel pour déplacer ton menu, alors il faut remplacer le code du tutoriel :

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

      par :

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

      Supprimer
    2. Merci Catherine!
      En fait, je n'avais pas remarqué que mon nouveau template avait déjà la barre de navigation fixée en haut, cependant, cette bar n'est pas faite en HTML, alors du coup je ne pourrais rien modifier n'est ce pas?

      Mille merci!

      Supprimer
    3. Bonjour Ade,
      Si ton menu n'est pas faite dans un gadget HTML, tu peux quand même modifier son apparence. Il faut trouver les codes CSS qui lui sont associés. En regardant rapidement ton blog, les codes CSS de ton menus commencent par :

      .sky-mega-menu

      Dans mes tutoriels, les codes CSS du menu commencent par :

      #barre_nav

      C'est la seule différence entre les codes CSS de ces menus. Tu peux donc chercher les mêmes codes CSS en remplaçant #barre_nav de mes tutoriels par .sky-mega-menu. Attention seulement à ne pas supprimer les codes de ton thème. Mieux vaut ajouter des paramètres à tes codes CSS existants, sinon tu risques de créer des problèmes d'affichage.
      Je te conseil de faire une sauvegarde de ton thème avant toute modification ;)

      Supprimer

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

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger