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


Ayant des problèmes de chargement des commentaires trop nombreux sur l'article original, je vous invite à laisser votre commentaire ici :)

Autres articles

69 commentaires:

  1. Bonjour,

    Merci pour votre tutoriel! Petite question: je souhaiterais modifier la couleur de l'entrée du menue active. Accueil lorsque le visiteur est sur accueil, A propos lorsqu'il se trouve sur cet onglet. Comment faire? Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Megane,
      Tu peux essayer d'ajouter des codes CSS pour chaque lien à la suite des codes CSS de ton menu.
      Ajoute le code suivant (un code pour chaque lien) :

      #barre_nav ul li a[href="URL-DU-LIEN"] {
      }

      Remplace URL-DU-LIEN par l'adresse URL de la page active (par exemple l'adresse de ton blog pour la page accueil, et l'adresse de ta page A propos pour ta page a propos).
      Rajoute ensuite les codes que tu souhaites changer pour ce lien avant le signe }. Et voilà ;)

      Supprimer
  2. Bonjour LadyBird Red !

    J'essaye actuellement de rajouter une seconde barre de navigation (avec un menu déroulant) en dessous de mon titre, qui va contenir des liens pour les labels de mes posts, exactement ce que tu expliquais; exemple Catégorie: Voyages / sous categories : Portugal, Allemagne.. etc
    J'ai lu ton post, d'ailleurs très bien expliqué! mais je n'arrive pas à trouver où déposer (et quoi) dans mon code html (sous blogger), j'utilise le model d'un template que j'ai modifié ensuite. mais consernant le head c'est fouillis.
    Ensuite, quand j'essaye, mes catégories sont dispositionnées verticalement. :(

    Comment faire? :( Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Louise,
      Si tu peux mettre un gadget dans la partie header dans mise en page, alors rajoute un menu dans un gadget HTML/JavaScript en suivant mes tutoriels (barre de navigation pt.1, barre de navigation pt.2, et menu déroulant).
      Normalement il ne devrait pas entrer en conflit avec ton premier menu car ils n'ont pas les mêmes noms.
      La seule chose à changer c'est le nom de tes codes CSS. Au lieu d'utiliser les codes suivants :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      }

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

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      }

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      }

      Il faut utiliser :

      /* ----- Apparence du menu ----- */
      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      }

      /* Police et Couleur des Liens */
      #barre_nav li a {
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      #barre_nav li a:hover {
      }

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

      Et ces codes pour les menus déroulants

      /* ----- Apparence du menu déroulant ----- */
      #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: #C49DB8; /* 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: #ffffff; /* Couleur des liens */
      }

      #barre_nav li ul a:hover, #barre_nav li ul li:hover > a {
      color: #ffffff; /* Couleur des liens quand survolés par la souris */
      background-color: #B061A2; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Supprimer
  3. Bonjour,

    J'aimerai savoir comment vous faites pour avoir dans votre menu ce "bouton" recherche qui se déplie pour effectuer une recherche sur votre blog.
    Merci d'avance

    RépondreSupprimer
  4. Bonjour Catherine !

    J'ai mis ma barre de navigation en haut, je l'ai personnalisé et tout ça grâce à tes tutoriels ! Seulement, je n'arrive pas à centrer le texte verticalement, il s'affiche en bas de la barre de navigation. J'ai essayé d'ajouter le code vertical-align:middle; mais ça ne marche pas... Je suis vraiment pas douée...

    Est-ce que tu saurais comment faire ?

    Je te remercie !

    Nastasia

    RépondreSupprimer
    Réponses
    1. Bonjour Nastasia,

      Tu peux essayer de rajouter ces 2 lignes :

      display: inline-block;
      vertical-align: middle;

      Au code suivant :

      .tabs-inner .widget li a {
      font-family: Cantarell;
      font-size: 14px;
      color: #7c7c7c;
      margin-right: 10px;
      margin-left: 10px;
      text-transform: uppercase;
      display: inline-block;
      vertical-align: middle;
      }

      Supprimer
    2. Ahhh ça marche ! C'est vraiment frustrant parfois ^^ Merci infiniment pour tout ce que tu fais !

      Supprimer
  5. Rebonjour,
    il y a deux lignes de séparations et un espace entre chaque catégories sur mon menu...
    Comment faire pour n'avoir qu'une seul ligne de séparation et supprimer cet espace?

    Sinon merci pour tous ces tutos géniaux !
    Mon blog : aliceetlenny.blogspot.com

    Merci pour ton aide et bonne soirée ;)

    RépondreSupprimer
    Réponses
    1. Bonjour Lenny,
      Je n'ai pas accès à ton blog, seuls les lecteurs on accès :/

      Supprimer
  6. Bonjour,

    tout d'abord bravo pour ce blog qui m'a permis de faire beaucoup de modifications sur le mien ! Il y a quelques mois j'ai suivi ton tutoriel pour créer cette fameuse barre de navigation et tout marche impec' ! Seulement j'aimerais savoir si tu sais comment créer des sous catégories de sous catégories ? Par exemple quand je survole la catégorie " Voyage " tous les pays s'affichent et j'aimerais que lorsque je survole la sous catégorie France les villes s'affichent du côté droit de ma colonne de pays.

    En espérant que mon commentaire soit assez explicite je te souhaite un bon réveillon du nouvel an en avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Charlène,
      Tu peux tout à fait ajouter un menu déroulant dans un lien d'un menu déroulant. Il te suffit de suivre les mêmes instructions pour le code HTML : colle le code de ton nouveau menu déroulant avant le </li> du lien sous lequel (ou dans ce cas à côté duquel) tu souhaite que le menu déroulant apparaisse.

      Ensuite il faut ajouter des codes CSS supplémentaires pour gérer l'affichage de ces menus déroulants secondaires :

      .tabs ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul li:hover ul {
      display: block !important;
      }

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

      .tabs ul ul li:hover ul ul {
      display: none !important;
      }

      .tabs ul ul ul li:hover ul {
      display: block !important;
      }

      Supprimer
    2. Merci je vais essayer =). !

      Supprimer
    3. Bonjour,
      Je me permet de m'intégrer à votre discussions car j'ai moi aussi voulu réaliser des sous catégories de sous catégories. Mais lorsque j'ajoute les codes CSS ça ne fonctionne pas... plus aucune de mes sous-sous catégories ne s'affiche.

      Et bien évidemment je te remercie pour tes multiples tutoriels...ton blog est une mine d'or pour moi!

      merci d'avance de ton aide.

      Supprimer
    4. Bonjour Laurene,
      Peux-tu me donner le lien vers ton blog ?

      Supprimer
  7. Voici le lien:
    letransportereves.blogspot.be

    RépondreSupprimer
  8. Bonjour,
    Je n'ai pas pensé à te dire, mais les sous-sous-catégories doivent normalement s'afficher dans Bivouac et electronique...
    De plus je me permet de te poser une seconde question comme tu vas te pencher sur mon blog:
    Lorsqu'il s'affiche la police du menu n'est pas tout de suite la bonne...il faut quelques secondes pour qu'elle change et devienne celle que j'ai choisi dans mon menu déroulant.
    Est-il possible de remédier à cela.

    merci d'avance
    Laurène
    letransportereves.blogspot.be

    RépondreSupprimer
    Réponses
    1. Bonjour Laurene,
      Rajoute la ligne suivante :

      overflow: visible;

      Avant le signe } de ce code CSS :

      /* Apparence du menu déroulant */
      .tabs .widget 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;
      }

      Comme ceci :

      /* Apparence du menu déroulant */
      .tabs .widget 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;
      overflow: visible;
      }

      Et voilà ;)

      Supprimer
    2. 1000 mercis! les sous-sous catégories s'affichent à présent!
      Et pour le changement de police lorsqu'on arrive sur mon blog (cf: commentaire précédent)...il y a une solution?

      Supprimer
    3. Bonjour Laurene,
      S'il y a trop de choses à charger sur la page, alors cela peut prendre un peut de temps. Essaye de réduire la taille de tes images en les sauvegardant en .jpg pour le web, par exemple.

      Supprimer
    4. Tant mieux si ça marche pour certaines parce que moi je n'ai jamais trouvé comment faire encore x).

      Supprimer
    5. Rectification ! Je me suis penchée sur le problème et tout fonctionne ! Merci =). !

      Supprimer
    6. Bonjour Charlène,
      Tant mieux ! :)
      D'où venait le problème ?

      Supprimer
  9. Bonjour Catherine ! :) me voilà avec la barre de menu que je cherchais grâce à votre tutorial ! J'avais une petite question, quel paramètre faut il que je change pour pouvoir rapprocher ma barre de menu du premier article du blog ? Je trouve la barre un tout petit peu haute, j'aurais aimé la descendre un peu.

    Merci infiniment pour vos tutoriels très complets et pour votre réponse !

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

      .main-outer {
      border-top: 0 solid rgba(0, 0, 0, 0);
      margin-top: 40px; /* Espace en-dessous du titre du blog */
      }

      Le premier paramètre est sûrement différent pour toi (border-top), mais ce n'est pas grave car la ligne qui nous intéresse est :

      margin-top: 40px; /* Espace en-dessous du titre du blog */

      Réduit la valeur de 40px pour celle de ton choix pour rapprocher ton menu de tes articles. Tu peux même mettre une valeur négative pour réduire encore plus cet espace ;)

      Supprimer
    2. ça a marché merci de tout coeur !! Grâce à vous et à vos supers articles je commence même à trouver parfois la réponse à mes questions, mais j'avoue que là j'aurais pas trouvé :)

      Supprimer
  10. Salut ! J'aime beaucoup ton blog, j'ai déjà suivi quelques uns de tes tutoriels pour améliorer le mien ! J'ai juste un problème avec ma barre de navigation, j'ai mis des sous-catégories, mais elles ne s'affichent pas directement en dessous de la catégorie concernée, du coup on arrive pas à cliquer dessus ou très difficilement ! J'ai pourtant suivi le tuto et revérifier plusieurs fois pour voir si j'avais pas oublié quelque chose, mais rien ! Je ne trouve pas mon erreur, est-ce que tu pourrais m'aider ? Merci beaucoup !

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

      Supprimer
  11. Hello,
    J'ai voulu faire quelques petites modifications sur mon menu déroulant et maintenant mes sous catégories apparaissent toutes à gauche. J'ai du toucher à quelque chose qu'il ne fallait pas mais impossible de trouver d'où viens le problème. Peux-tu m'aider?

    Lien de mon blog : http://www.floweredheart.com/

    Merci d'avance!

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

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline;
      float: none;
      }

      Remplace inline par inline-block comme ceci :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      Et voilà ;)

      Supprimer
  12. Bonjour! Ton blog m'aide énormément et je te remercie pour tout le boulot que tu y apportes. Seulement, j'ai plusieurs petits problèmes... 1) J'aimerais épaissir ma barre de navigation, mais je ne trouve pas comment faire. 2) Mon widget Instagram ne s'affiche pas, pourtant j'ai coché toutes les confidentialités, mis mon Instagram en public... 3) Je ne sais pas comment centrer mon image qui me sert de titre. Elle s'affiche par rapport à la colonne des articles, mais je voudrais qu'elle s'affiche par rapport à tout le blog.

    mon blog: www.cashmere-blue.blogspot.be/

    Merci beaucoup! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le mieux pour augmenter la largeur de ton menu, est d'ajouter des espaces au-dessus et en-dessous de liens. Retrouve ton code CSS :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Calibri;
      font-size: 13px;
      font-style: normal;
      text-decoration: none;
      color: #424343;
      margin-right: 20px;
      }

      Avant le signe } ajoute :

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

      Ton gadget Instagram s'affiche bien de mon côté.

      Et je vois que tu as réussi à centrer ton image d'en-tête ;)

      Supprimer
  13. Je te remercie pour ce précieux conseil, mais malheureusement, cela n'a pas fonctionné. Ma barre de navigation est toujours "séparée" en deux sans aucunes marges. Que puis-je faire?

    (En effet, mon widget s'est finalement décidé à fonctionner et j'ai trouvé comment centrer mon image d'en-tête :))

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème de ton menu en 2 parties vient de ton menu-déroulant qui est visible. Je ne trouve pas les codes CSS pour tes menus-déroulants, qui vont justement définir leur visibilité :/

      Supprimer
  14. J'ai un petit soucis, j'ai créé des seconds menus déroulants (pour "maquillage" dans "beauté"), mais je n'arrive pas à les afficher...
    Par contre, je n'arrive pas à te copier/coller le HTML, j'ai un message d'erreur en voulant publier le commentaire à chaque fois

    Pourrais-tu m'aider stp ?

    Merci d'avance, tes tutos m'ont bien aidé !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est normal que tu ne puisses pas coller les codes dans les commentaires, il faut les coller dans un format spécial pour qu'ils soient pris en compte.
      As-tu toujours un problème avec tes menus déroulants ?

      Supprimer
  15. Bonjour,
    J'ai comme un souci il y a sur mon blog ceci exemple:

    BASIQUE.
    ________

    PÂTE BRISÉE

    PÂTE À CRÊPES

    PÂTE À PIZZA.

    SUCRE VANILLÉ

    Pouvez-vous me dire comment on peu faire pour avoir ceci exemple:

    BASIQUE.
    ________

    PÂTE BRISÉE
    PÂTE À CRÊPES
    PÂTE À PIZZA.
    SUCRE VANILLÉ

    merci beaucoup je suis perdu.
    http://ma-cuisine-sans-lactose.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas ton menu sur ton blog :/

      Supprimer
  16. Bonjour Catherine, merci pour tes tutos et tes conseils. Grace à toi j'ai commencé a avoir le blog de mes rêves ;)
    Cependant je n'arrive pas a agrandir la barre du menu, la bordure est toute petite. j'ai augmenté les px, rien a faire.
    De plus j'aimerais que tout comme pour ton blog la barre s’étende sur toute la page.
    Pour finir j'aimerais savoir s'il est possible de changer la date des articles pour qu'elle soit plus ancienne. Parce que j'avais deja un blog sur blog4ever, et comme je n'arrive pas a l'exporter sur blogger, je fais cela article/article, du coup les anciens deviennent nouveaux. Or j'aimerais si l'article date de 2015 par ex, mettre cette date la.
    le lien vers mon blog : http://fou-na.blogspot.com/
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour le menu, est-ce normal que tu n'ai pas indiqué de couleur de fond ? Pour la bordure, les codes que tu as renseigné ne sont pas tout à fait correct. Tu as écrit :

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

      Or il faut écrire pour la bordure du bas :

      border-bottom-style: solid;
      border-bottom-color: #EDF7F2;
      border-bottom-width: 20px;

      Et la bordure du haut :

      border-top-style: solid;
      border-top-color: #EDF7F2;
      border-top-width: 15px;

      Pour ajouter une couleur de fond ajoute :

      background: #EDF7F2;

      Avant le signe } du même code CSS.

      Ta barre est déjà sur toute la largeur de la page ;)
      Par contre il y a une marge au-dessus et en-dessous de ton menu qui créé un espace entre le bord de la page et ton menu. Supprime ces 2 lignes :

      margin-top: 10px;
      margin-bottom: 10px;


      Tu peux modifier la date d'un article en allant sur la page de création/modification de cet article. Dans les paramètres à droite de l'écran clique sur Date de publication et choisit la date de ton choix. Pour un nouvel article clique sur Planifier puis sur Configurer une date.

      Supprimer
  17. Bonjour Catherine, tout d'abord un grand merci pour ces conseils. J'ai créé un blog il y quelques jours et je dois avouer que je n'y connais rien au codage ^^
    Grâce à vos tutos, j'ai réussi à créer une barre de navigation et à ajouter deux "onglets". Après cela, j'ai suivi ce tuto pour la configurer mais lorsque je change le code, rien ne se passe, ma barre ne change pas... J'ai perdu une première fois toutes mes modifications en pensant que je n'avais pas sauvegarder. Alors j'ai recommencé mais rien ne change. J'ai également testé en utilisant le modèle "simple" alors que j'utilisais "awesome", mais toujours rien. Comment pourrais-je faire ?

    Merci d'avance :)

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

      Supprimer
  18. Bonjour Catherine. C'est encore moi.
    J'ai deux questions:

    1/ En créant le menu déroulant, les bordures de la barre de navigation ont disparues.
    2/ Puis par la suite avec un autre tuto pour avoir l'en-tête à 100% de la page, j'ai modifié mon logo d'en-tête et je l'ai positionné au milieu de la page.
    À partir de là, je n'ai plus pu mettre de l'espace entre le le logo d'en-tête et la barre de navigation.

    Peux-tu m'aider s'il te plaît?

    Tes tutos sont une vraie merveille. Merci.

    Tiphaine

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine,

      1/ Pour les bordures, tu as supprimé 2 petits codes dans ton menu. Retrouve le code HTML de ton menu. Juste après la ligne :

      <div id="barre_nav">

      Ajoute :

      <ul>

      Ensuite à la fin du code, juste avant la ligne :

      </div>

      Ajoute :

      </ul>

      2/ Pour ajouter des l'espace autour de ton en-tête, retrouve ce code CSS :

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

      Remplace la valeur de 0px à la ligne ci-dessous pour ajouter de l'espace au-dessus de ton en-tête :

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

      Pour ajouter de l'espace sous ton en-tête, ajoute la ligne suivante :

      margin-bottom: 0px; /* Espace en-dessous de l'en-tête */

      avant le signe } de ce même code, comme ceci :

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

      Remplace également la valeur 0px par celle de ton choix ;)

      Supprimer
  19. ha oui! et j'avais essayé de séparer mon menu en deux mais ça n'a pas fonctionné. Alors, je ne sais pas s'il reste du code de ce tuto qui perturbe tout, pourtant j'avais essayé de l'enlever.
    Bises
    Tiphaine

    RépondreSupprimer
    Réponses
    1. Ça devrait marcher. Mais comme il te manquait <ul> et </ul>, le problème venait peut-être de là.

      Supprimer
    2. Merci infiniment Catherine!
      J'ai retrouvé mes bordures! J'aurais dû mieux regarder!
      Encore merci

      Supprimer
  20. Bonjour! J'ai ne eu aucun problème pour créer ma barre de menue, ton tuto est top! Par contre j'aimerais créer une seconde barre de menue et la mettre au-dessus de ma bannière, le problème c'est que j'aimerais que cette seconde barre soit différente (fond, couleur,etc) de ma première barre de menue, mais je sais pas ou mettre le code. Comment faire?

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      Tu peux tout à fait suivre ces tutoriels pour créer un 2e menu. Il fait juste changer le nom de ton menu dans le code HTML et le code CSS pour bien les différencier. Par exemple, remplace barre_nav dans le code HTML du menu par barre_nav2 par exemple. Pour les codes CSS, utilise plutôt les codes suivants :

      /* ----- Apparence du menu ----- */
      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav2 ul {
      }

      /* Police et Couleur des Liens */
      #barre_nav2 li a {
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      #barre_nav2 li a:hover {
      }

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

      Et ces codes pour des menus déroulants

      /* ----- Apparence du menu déroulant ----- */
      #barre_nav2 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_nav2 li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: -15px; /* Alignement avec le lien de la barre de navigation */
      }

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

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

      #barre_nav2 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_nav2 ul ul a {
      color: #ffffff; /* Couleur des liens */
      }

      #barre_nav2 li ul a:hover, #barre_nav2 li ul li:hover > a {
      color: #ffffff; /* Couleur des liens quand survolés par la souris */
      background-color: #B061A2; /* Couleur du fond du lien quand survolés par la souris */
      text-decoration: none;
      }

      Colle le code code HTML de ton 2e menu directement dans le thème de ton blog, au-dessus de la ligne :

      <header>

      Cette ligne correspond au début de l'en-tête ;)

      Supprimer
  21. Bonjour, je t'ai envoyé un mail pour poser ma question, excuse-moi je n'avais pas vu l'article pour mettre des commentaires...
    Je suis venue te demander ton aide car une barre en dessous de mon menu est venu s'immiscer. Je ne comprends pas vraiment d'où elle vient, lorsque je change le code CSS elle est toujours là. Est-ce que c'est possible que tu regardes si tu as le temps? mon blog est http://lestribulationsdekaren.blogspot.fr/
    Merci pour tout ce que tu fais, bonne continuation !
    Karen

    RépondreSupprimer
    Réponses
    1. Bonjour Karen,
      Veux-tu parler de la bordure verte sous les liens de ton menu ?
      Si oui, alors retrouve ce code CSS :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: solid;
      border-top: solid;
      border-color: #50A94D;
      border-width: 1px;
      }

      Supprime les 2 lignes :

      margin-bottom: 10px;
      border-bottom: solid;

      Comme ceci :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      margin-top: 10px;
      border-top: solid;
      border-color: #50A94D;
      border-width: 1px;
      }

      Et voilà :)

      Supprimer
  22. Bonjour, comment fait on pour que dans la barre de navigation quand on clique dessus il y'est plusieurs liens? Je sais pas trop comment expliquer désolé

    RépondreSupprimer
    Réponses
    1. Bonjour Anais,
      Veux-tu parler d'un menu déroulant qui apparaît sous le lien quand on le survol avec la souris, et qui afficherait plusieurs liens ?
      Ou afficher plusieurs articles quand on clique sur un lien ?

      Supprimer
  23. Bonjour Cath' !

    J'ai un énorme soucis (qui m'empêche donc de mettre mon blog en ligne à tous), j'ai fais une barre de navigation sur mon blog comme toi, tout en haut, avec sous-catégories.
    Mon problème est que sur mobile, mon menu ne s'affiche pas en déroulant, mais en catégories éparpillées au dessus de mon titre.. J'ai cherchée partout sur le net pour savoir comment rétablir ça, sans solution...
    J'aimerai beaucoup avoir ton aide à ce propos et pouvoir enfin finir mon blog complètement..
    Pourrais-tu m'aider ? Je te remercie d'avance !
    Bises.

    RépondreSupprimer
    Réponses
    1. Bonjour Angie,
      C'est normal car le menu sur mobile ne se met pas en menu déroulant.
      Je te conseil d'utiliser un gadget Pages pour créer un 2e menu pour la version mobile, car le gadget Pages se met automatiquement en menu déroualnt il me semble.
      Une fois créé, tu peux cacher le menu de la version web sur mobile avec le code suivant :

      .mobile #barre_nav {
      display: none;
      }

      De la même manière, tu peux cacher le menu de la version mobile sur la version web avec le code suivant :

      #PageList1 {
      display: none;
      }

      Remplace PageList1 par le nom de ton gadget en suivant ces instructions.
      Pour finir, il faut ajouter un code pour afficher ce gadget sur mobile :

      .mobile #PageList1 {
      display: block;
      }

      Supprimer
    2. Oh, merci beaucoup ! Tu me sauve la vie là! :D

      Par contre, un autre problème s'ouvre du coup... C'est que mes articles qui figurent dans chaque catégorie grâce aux libellés, ne se voient donc pas sur les pages via le mobile... Comment puis-je faire à ce niveaux-là ?

      Je suis vraiment désolé de t'embêter encore..

      (D'ailleurs, une autre petite question, qui n'a rien a voir avec la barre de navigation, mais dont j'ignore où te la poser... J'aimerai qu'à la fin de mes articles, il y est une barre avec d'autres articles de la même catégorie ou ayant le même libellé, je ne sais pas si tu vois... Une sorte de "Voir aussi:", je n'ai trouvé de réponse nul part... :/)

      Encore un immense (grand) merci pour ton aide <3

      Supprimer
    3. Bonjour Angie,
      Tu peux utiliser les libellés dans le gadget pages.
      Dans les paramètres de ton gadget, clique sur Ajouter un lien externe pour ajouter un lien vers un libellé. A titre de la page entre le texte de ton lien. A adresse web (URL) entre l'adresse URL de ton libellé, comme dans ton menu HTML ;)
      Par contre, avec le gadget Pages tu ne peux pas avoir de menu déroulant. Il faudra donc se concentrer sur les liens les plus importants sur mobile.

      Supprimer
  24. Bonjour!

    Merci pour tous ces tutoriels!
    Malgré la clarté des explications, j'ai un petit soucis avec ma barre de Menu...

    Je m'explique : la barre prends bien la forme escomptée, mais la police des textes ne veut pas s'adapter aux codes saisis :( Ni pour la police "de base" ni pour la police au survol de la souris... Pourtant j'ai pas l'impression d'avoir fais d'erreurs, voici mon code :

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

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



    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin: 120px;
    border: solid;
    border-color: #000000;
    border-top : solid;
    border-bottom : solid;
    border-left : none;
    border-right : none;
    border-width: 1px;
    }


    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: Syncopate;
    font-size: 14px;
    font-style: normal;
    text-decoration: none;
    color: #000000;
    margin-right: 40px;
    }

    /* Police et Couleur des Liens quand Survolés par la Souris */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    font-style: bold;
    text-decoration: none;
    color: #000000;
    }

    /* Centrer la Barre de Navigation */
    .tabs .widget li, .tabs .widget li {
    display: inline;
    float: none;
    }


    /* Columns
    ----------------------------------------------- */
    .main-outer {
    border-top: $(main.border.width) solid $(body.rule.color);
    }


    La seule police qui marche est "Arial" sinon, il me met la police de base avec toutes les autres essayées...
    J'espère ne pas être une cause désespérée! Haha.

    Merci encore pour votre aide!

    http://blogpourtesttemplate.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Actuellement tu as la police Open sans :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Open Sans;
      font-size: 12px;
      font-style: normal;
      text-decoration: none;
      color: #000000;
      margin-right: 50px;
      }

      Normalement tu devrais pourvoir modifier la police. Je ne vois pas de grosse erreur. Je te conseil d'installer une police Google Fonts si tu veux changer de police. Juste pour être s'assurer qu'elle chargera.
      Petit détail, pour les liens survolés par la souris :

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      font-style: bold;
      text-decoration: none;
      color: #000000;
      }

      Tu as défini la graisse du texte en gras avec la ligne suivante :

      font-style: bold;

      Or cette ligne est fausse il faut écrire :

      font-weight: bold;

      Supprimer
  25. bonsoir j'ai suivi tout le tutorial mais ma barre de navigation est verticale et non horizontale, j'aimerai savoir comment faire merci beaucoup pour tes articles qui m'aide beaucoup plus :)

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

      Supprimer
  26. Rebonjour,
    Je me suis trompée, j'ai déposé mon article sur le mauvais article.
    Je réexplique donc, j'ai bien fait les modifications de largeur du menu, en-tête, pied de page mais en mettant ma bannière, puis en la centrant, je la retrouve centrée sur ma barre de navigation, pas le contenu menu/barre latérale. Est ce qu'il y a moyen que je change quelque chose à ça? Je trouve ça pas très jolie..

    Merci mille fois
    Pauline

    RépondreSupprimer
  27. Bonjour,
    Merci encore pour ton travail!
    J'ai téléchargé un thème sur internet, et du coup je ne sais pas où je dois placer les codes CSS pour pouvoir personnaliser ma barre de navigation...
    Pourrais-tu m'aider?
    Voici mon blog : http://wildaamanda.blogspot.fr/
    Merci d'avance,
    Amandine

    RépondreSupprimer
    Réponses
    1. Bonjour Amandine,
      Tu peux coller tous les codes CSS avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  28. Bonjour,
    merci beaucoup pour ce tuto!
    j'ai beaucoup cherché et tenté plein de choses, mais je n'arrive pas à changer la couleur des bordures de mes libellés... je les voudrais en noir (#000000)
    pouvez-vous me dire comment résoudre ce problème svp?
    merci!

    /* Tabs
    ----------------------------------------------- */
    .tabs-inner .section:first-child {
    border-top: $(header.bottom.border.size) solid $(tabs.border.color);}
    .tabs-inner .section:first-child ul {
    margin-top: -$(header.border.size);
    border-top: $(header.border.size) solid $(tabs.border.color);
    border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
    border-right: $(header.border.horizontalsize) solid $(tabs.border.color);}
    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);
    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);}
    .tabs-inner .widget li a {
    display: inline-block;
    padding: .6em 1em;
    font: $(tabs.font);
    color: $(tabs.text.color);
    border-$startSide: $(tabs.border.width) solid $(content.background.color);
    border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);}
    .tabs-inner .widget li:first-child a {
    border-$startSide: none;}
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: $(tabs.selected.text.color);
    background-color: $(tabs.selected.background.color);
    text-decoration: none;}

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Comme tu n'as pas modifié le code CSS de ton thème tu peux aller directement dans le mode Personnaliser pour modifier ces couleurs.
      Vas sur Modèle, clique sur Personnaliser. Dans la liste de liens en haut à gauche de la page clique sur Avancé. Tu trouveras à droite une nouvelle liste d'éléments dont tu peux modifier la couleur, police, etc., dont les liens de ton menu ;)

      Supprimer
  29. Bonjour,

    Merci pour ta réponse.

    Désolée mais je n'y arrive pas... Car malheureusement, dans le mode Personnaliser, on peut modifier le texte des onglets (couleur et police) et l'arrière-plan des onglets (couleur). Mais pas moyen d'agir sur la couleur des bordures...

    merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Les bordures viennent de code code CSS :

      .tabs-inner .widget li a {
      display: inline-block;
      padding: .6em 1em;
      font: $(tabs.font);
      color: $(tabs.text.color);
      border-$startSide: $(tabs.border.width) solid $(content.background.color);
      border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);}

      Remplace-le par :

      .tabs-inner .widget li a {
      display: inline-block;
      padding: .6em 1em;
      font: $(tabs.font);
      color: $(tabs.text.color);
      border: none;
      }

      Et voilà ;)

      Supprimer
  30. Merci beaucoup pour ton aide! ça marche!

    RépondreSupprimer

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