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

Séparer votre barre de navigation en deux parties sur Blogger

Voici le tant attendu tutoriel pour séparer son menu en 2 parties : une partie à gauche et une partie à droite.

Vous pouvez mettre ce que vous voulez dans chaque partie. Les liens du menu à gauche et des icônes vers les réseaux sociaux à droite ? C'est possible.
Des liens à gauche et des liens à droite ? C'est également possible !

Allez, c'est parti pour les explications ;)

Sommaire

  1. Faire une sauvegarde de son thème
  2. Créer son menu
  3. Séparer le menu en 2 parties
  4. Ajouter des liens à la 2e partie du menu
    1. Texte
    2. Images
    3. Icônes CSS vers les réseaux sociaux
      1. Installer Font Awesome
      2. Les codes HTML pour les icônes
  5. Modifier l'apparence des menus
    1. Aligner les 2 menus sur une même ligne
    2. Aligner le contenu des menus à gauche et à droite
    3. Modifier l'apparence des liens du 2e menu

Faire une sauvegarde de son thème

Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Séparer votre barre de navigation en deux parties sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Créer son menu

Pour pouvoir séparer le menu en 2 parties il faut créer un menu en HTML. Cala ne marchera pas avec le gadget Pages.

Si vous n'avez pas encore créé votre menu HTML, vous pouvez suivre les tutoriels suivants :


Séparer le menu en 2 parties

Vous allez voir, c'est très simple.

Tout d'abord il faut comprendre comment ça marche.
Un menu en HTML est simplement une liste de liens dont on a modifié l'apparence pour qu'elle apparaisse comme un menu.

Pour l'instant votre menu se compose donc d'une liste de lien. On va simplement créer une 2e liste de lien dans le même gadget HTML. Cette 2e liste sera la 2e partie de notre menu. On pourra alors, avec du CSS, définir la position des liens de chaque liste dans notre menu : A gauche et à droite.

Si vous avez créé votre menu avec mon tutoriel, alors le code de ce menu, dans son gadget HTML/JavaScript, doit ressembler à ceci :
<!-- début du menu -->

<div id="barre_nav">
<ul>
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>
</div>

<!-- fin du menu -->
Avant de créer la 2e partie de notre menu, il faut remplacer une petite ligne de code.

Ajoutez ceci :
class="first-nav"
juste avant le signe > de <ul> comme ceci :
<ul class="first-nav">
Maintenant il faut rajouter la ligne suivante :
<div>
Juste après :
<div id="barre_nav">
Comme ceci :
<!-- début du menu -->

<div id="barre_nav">
<div>

<ul class="first-nav">
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>

</div>

<!-- fin du menu -->
On peut maintenant créer une 2e liste de liens. Voici le code que nous allons utiliser :
<!-- début de la 2e partie du menu -->
<ul class="second-nav">

<!-- les liens du 2e menu vont ici -->

</ul>
<!-- fin de la 2e partie du menu -->

</div>
Ajoutez tout ce code avant la ligne :
</div>
Comme ceci :
<!-- début du menu -->

<div id="barre_nav">
<div>

<ul class="first-nav">
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>

<!-- début de la 2e partie du menu -->
<ul class="second-nav">

<!-- les liens du 2e menu vont ici -->

</ul>
<!-- fin de la 2e partie du menu -->

</div>

</div>

<!-- fin du menu -->

Ajouter des liens à la 2e partie du menu

Maintenant qu'on à créé la 2e partie du menu il faut y ajouter des liens ! Vous pouvez ajouter des liens au format texte, des images et des icônes vers les réseaux sociaux.

Texte

Pour ajouter des liens au format texte, il suffit de rajouter des liens comme vous l'avez fait pour le premier menu.

Voici le code HTML d'un lien à ajouter dans le menu :
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
Collez cette ligne juste après :
<!-- les liens du 2e menu vont ici -->
Remplacez :

  • Texte du Lien par le texte que vous voulez afficher dans votre menu.
  • Titre par le même texte que Texte du Lien. Celui-ci ne sera pas affiché dans le menu.
  • http://nomdublog.blogspot.fr/page.html par l'adresse URL vers lequel vous souhaitez être redirigé en cliquant sur le lien.

Images

Si vous voulez utiliser une image à la place d'un texte, alors il faut remplacer Texte du Lien du code HTML suivant :
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
Par
<img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" />
Ce qui donne :
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" /></a></li>
Collez cette ligne juste après :
<!-- les liens du 2e menu vont ici -->
Ou après le signe </li> du lien qui doit le précéder, si vous avez déjà ajouté des liens dans votre menu ;)

Par exemple, si j'ai déjà un lien texte et que je souhaites ajouter un lien image j'écris :
<!-- les liens du 2e menu vont ici -->
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" /></a></li>
Remplacez :

  • http://nomdublog.blogspot.fr/page.html par l'adresse URL vers lequel vous souhaitez être redirigé en cliquant sur le lien.
  • http://nomdublog.blogspot.fr/image.jpg par l'adresse URL de votre image.
  • Texte alternatif par un texte qui ne s'affichera que si l'image n'a pas pu être chargé. C'est comme une roue de secours au cas où ;)
  • Titre par le même texte que Texte alternatif. Celui-ci ne sera pas affiché dans le menu.

Icônes CSS vers les réseaux sociaux

Si vous voulez ajouter des icônes vers vos pages sur les réseaux sociaux vous pouvez les créer en HTML et CSS au lieu d'utiliser des images. L'avantage ? Vous pourrez modifier leur couleur à tout moment !

Installer Font Awesome

Pour créer des icônes vers les réseaux sociaux il faut d'abord installer la police Font Awesome sur votre blog. Si vous avez créé vos boutons de partage en suivant mon tutoriel, alors c'est déjà fait ! Passez à l'étape suivante ;)

Sinon, il faut rajouter un petit code HTML dans votre thème.
Ne fermez pas la fenêtre du gadget HTML/JavaScript de votre menu !

A partir de votre tableau de bord, cliquez sur Modèle puis Modifier le code HTML :

Séparer votre barre de navigation en deux parties sur Blogger

Cliquez dans la boîte de code puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Dans la boîte de recherche qui apparaît collez :
<head>
Et appuyez sur Entrer.

Juste après cette ligne collez :
<!-- Font Awesome -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
Comme ceci :

Séparer votre barre de navigation en deux parties sur Blogger

Retournez sur le gadget HTML/JavaScript de votre menu.

Les codes HTML pour les icônes

Pour utiliser les icônes Font Awesome dans vos liens, remplacez Texte du Lien du code HTML suivant :
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
Par un des codes suivants :

Pinterest


  • <i class="fa fa-pinterest"></i>

  • <i class="fa fa-pinterest-p"></i>

  • <i class="fa fa-pinterest-square"></i>

Facebook


  • <i class="fa fa-facebook"></i>

  • <i class="fa fa-facebook-official"></i>

Instagram


  • <i class="fa fa-instagram"></i>

Vine


  • <i class="fa fa-vine"></i>

Google +


  • <i class="fa fa-google-plus"></i>

  • <i class="fa fa-google-plus-square"></i>

Twitter


  • <i class="fa fa-twitter"></i>

  • <i class="fa fa-twitter-square"></i>

Tumblr


  • <i class="fa fa-tumblr"></i>

  • <i class="fa fa-tumblr-square"></i>

Vimeo


  • <i class="fa fa-vimeo"></i>

  • <i class="fa fa-vimeo-square"></i>

Youtube


  • <i class="fa fa-youtube"></i>

  • <i class="fa fa-youtube-play"></i>

  • <i class="fa fa-youtube-square"></i>

Vous pouvez aller voir tous les icônes proposés par Font Awesome.

Remarque : Font Awesome ne propose pas d'icône Hellocoton. Mais pas de panique, je vous ai créé une icône !

Hellocoton

<span class="hello-icon"><svg viewBox="0 0 65.333 63.5" xmlns="https://www.w3.org/2000/svg"><path class="hc" d="M31.65,32.519c0,0-12.85-5.253-12.099-19.012C20.301-0.254,31.217,0.4,32.226,0.4 c1.007,0,13.105,0.437,13.105,15.415C45.331,15.815,20.992,14.947,31.65,32.519z" display="inline"></path><path class="hc" d="M33.465,30.971c0,0,1.657-13.78,15.124-16.704c13.466-2.926,15.73,7.773,15.997,8.747 c0.267,0.971,3.11,11.79-11.332,15.76C53.254,38.773,47.581,16.036,33.465,30.971z" display="inline"></path><path class="hc" d="M35.646,32.688c0,0,13.553-3.002,20.771,8.736c7.221,11.738-2.126,17.417-2.953,17.991 c-0.829,0.574-10.693,7.308-19.224-5.005C34.241,54.41,54.414,41.06,35.646,32.688z" display="inline"></path><path class="hc" d="M34.104,34.846c0,0,7.272,11.822-1.454,22.487C23.925,68,15.497,61.028,14.683,60.435 c-0.814-0.596-10.597-7.759-1.756-19.852C12.927,40.583,32.338,55.321,34.104,34.846z" display="inline"></path><path class="hc" d="M31.308,35.39c0,0-9.585,10.039-22.119,4.311c-12.531-5.727-7.933-15.649-7.565-16.588 c0.369-0.938,4.763-11.912,18.704-6.438C20.327,16.674,11.057,38.887,31.308,35.39z" display="inline"></path><path class="hc" d="M64.586,23.014c-0.267-0.974-2.531-11.673-15.997-8.747c-1.181,0.257-2.266,0.601-3.271,1.007 C45.023,0.836,33.22,0.4,32.226,0.4c-1.009,0-11.925-0.654-12.674,13.106c-0.056,1.016-0.029,1.979,0.054,2.904 C6.239,11.596,1.985,22.19,1.623,23.112C1.256,24.051-3.343,33.974,9.188,39.7c1.195,0.546,2.363,0.947,3.498,1.229 c-8.4,11.881,1.189,18.915,1.996,19.505c0.814,0.594,9.242,7.565,17.967-3.102c0.71-0.867,1.304-1.742,1.814-2.618 c8.479,11.881,18.179,5.27,19.001,4.7c0.827-0.574,10.174-6.253,2.953-17.991c-0.681-1.106-1.418-2.082-2.194-2.941 C67.556,34.303,64.847,23.962,64.586,23.014z M34.883,53.959c5.04-9.638-0.779-19.113-0.779-19.113 c-1.549,17.958-16.668,8.831-20.362,6.314c10.229,1.914,17.566-5.771,17.566-5.771C14.133,38.355,18.19,22.834,19.82,18.049 c1.855,10.386,11.83,14.47,11.83,14.47c-9.188-15.147,7.619-16.591,12.436-16.7c-9.351,4.593-10.621,15.152-10.621,15.152 c11.642-12.316,17.536,0.979,19.247,6.023c-7.359-6.454-17.065-4.307-17.065-4.307C52.37,40.148,38.173,51.562,34.883,53.959z"></path></svg></span>

Par exemple, si je souhaites ajouter un lien vers ma page Facebook et ma page Pinterest j'écris :
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>
et
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-pinterest-p"></i></a></li>
Il faut remplacer :

  • http://nomdublog.blogspot.fr/page.html par l'adresse URL de votre page sur le réseau social en question.
  • Titre par le nom du réseaux social (Pinterest, Facebook, etc.)

Collez ces lignes juste après :
<!-- les liens du 2e menu vont ici -->
Ou après le signe </li> du lien qui doit le précéder, si vous avez déjà ajouté des liens dans votre menu ;)

Par exemple, si je rajoute ces liens après mon lien image et mon lien texte, j'écris :
<!-- les liens du 2e menu vont ici -->
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" /></a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-pinterest-p"></i></a></li>
Au final le code HTML de notre gadget HTML/JavaScript ressemble à ceci :
<!-- début du menu -->

<div id="barre_nav">
<div>

<ul class="first-nav">
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>

<!-- début de la 2e partie du menu -->
<ul class="second-nav">

<!-- les liens du 2e menu vont ici -->
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-pinterest-p"></i></a></li>

</ul>
<!-- fin de la 2e partie du menu -->

</div>

</div>

<!-- fin du menu -->
Une fois que vous avez tous vos liens, sauvegardez votre menu.

Visuellement on obtient :

Séparer votre barre de navigation en deux parties sur Blogger

Pour l'instant on se retrouve avec 2 menus, l'un en-dessous de l'autre. Pour les mettre côte à côte il faut ajouter du code CSS.

Modifier l'apparence des menus

Pour la suite du tutoriel nous allons utiliser des codes CSS. Une fois que vous avez fait une sauvegarde de votre thème allez dans Modèle puis cliquez sur Modifier le code HTML :


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

Séparer votre barre de navigation en deux parties sur Blogger

Cliquez dans la boîte de code puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Dans la boîte de recherche qui apparaît collez :
/* Columns
Et appuyez sur Entrer. Nous allons coller les codes CSS pour notre 2e menu juste au-dessus de cette ligne.

Aligner les 2 menus sur une même ligne

Pour aligner les 2 menus sur la même ligne ajoutez le code suivant :
/* Aligner les 2 menus sur une même lige */
#barre_nav ul {
    display: inline-block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
Juste avant la ligne :
/* Columns
Comme ceci :

Séparer votre barre de navigation en deux parties sur Blogger

Visuellement on obtient :

Séparer votre barre de navigation en deux parties sur Blogger

Vous remarquerez que la bordure que j'ai appliqué à mon menu s'applique aux 2 menus. Pour régler ce genre de problème, si vous avez créé votre menu avec mon tutoriel, il suffit de couper les codes CSS pour la bordure (ou la couleur de fond, etc.) qui se trouvent dans le code commençant par :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
Collez ces codes avant le signe } de ce nouveau code :
/* Apparence globale du menu */
#barre_nav {
}
Pour ma bordure j'obtiens :
/* Apparence globale du menu */
#barre_nav {
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}
Collez ce nouveau code juste avant la ligne :
/* Columns
Comme ceci :

Séparer votre barre de navigation en deux parties sur Blogger

Visuellement ça donne :

Séparer votre barre de navigation en deux parties sur Blogger

Aligner le contenu des menus à gauche et à droite

Pour aligner le 1er menu à gauche ajoutez le code CSS suivant à la suite des 2 précédents :
/* Alignement du 1er menu à gauche */
#barre_nav .first-nav {
    float: none;
    text-align: left;
}
Pour aligner le 2e menu à droite ajoutez le code CSS suivant à la suite des 2 précédents :
/* Alignement du 2e menu à droite */
#barre_nav .second-nav {
    float: right;
}

Si votre menu fait 100% de votre page en largeur, vous remarquerez que le premier menu est collé tout à gauche de l'écran et le 2e menu est collé tout à droite de l'écran :

Séparer votre barre de navigation en deux parties sur Blogger

Ce n'est pas très esthétique.
Nous allons donc définir une margeur maximale pour le contenant de notre menu, pour qu'il soit plus centré sur la page.

Tout d'abord il faut trouver la largeur maximale du contenant de notre blog. Pour cela, cherchez le code suivant :
content.width
Vous devrez tomber sur un code qui ressemble à ceci :

Séparer votre barre de navigation en deux parties sur Blogger

La largeur de votre contenant est indiqué sur cette ligne de code. Dans cet exemple, la largeur est de 1060px.

Ensuite, ajoutez le code CSS suivant :
/* Définit une largeur maximale pour le contenant du menu */
#barre_nav div {
    max-width: 1060px;   /* Remplacer la valeur en pixels par la largeur de votre contenant */
    margin: 0 auto;
}
Juste avant la ligne :
/* Columns
Remplacez 1060px par la largeur de votre contenant.

Visuellement on obtient :

Séparer votre barre de navigation en deux parties sur Blogger

Modifier l'apparence des liens du 2e menu

Par défaut les liens de votre 2e menu auront les mêmes paramètres visuels que les liens de votre premier menu.

Si vous voulez modifier spécifiquement l'apparence des liens du 2e menu, alors vous pouvez utiliser les codes CSS suivants :
/* Apparence des liens du 2e menu */
.second-nav a {
}

/* Apparence des liens du 2e menu quand survolés par la souris */
.second-nav a:hover {
}

/* Apparence des icônes Font Awesome du 2e menu */
.second-nav .fa {
}

/* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
.second-nav .fa:hover {
}

/* Apparence des images 2e menu */
.second-nav img {
}
Collez les codes qui vous intéressent avant la ligne :
/* Columns
Remarque pour l'icône Hellocoton : les codes CSS à utiliser pour l'apparence de l'icône Hellocoton sont les suivants
/* --- Contenant de l'icône Hellocoton --- */
.hello-icon {
    display: block;
    position: relative;
    width: 14px;   /* Largeur de l'icône */
    height: 14px;   /* Hauteur de l'icône */
    top: 1px;
}

/* --- Couleur de l'icône Hellocoton --- */
.hello-icon .hc {
    fill: #e8b960;   /* Couleur de l'icône */
}

/* --- Couleur de l'icône Hellocoton au survol --- */
.hello-icon:hover .hc {
    fill: #2a3848;   /* Couleur de l'icône */
}

Pour savoir quels codes CSS il faut utiliser pour modifier les couleurs, les polices, les fonds, les bordures, de ces différents éléments, je vous conseil de jeter un œil au tutoriel sur la barre de navigation partie 2 qui explique tous ces codes en détail. Ajoutez chaque ligne de code CSS (bordure, fond, etc.) avant le signe } du code de votre choix ci-dessus.

Autres articles

219 commentaires:

  1. Bonjour ! :-)

    Merci beaucoup pour ce super tuto,
    Je cherchais à le faire depuis très longtemps, et c'est réussi !! :)
    J'ai une petite question, depuis que j'ai rajouté le deuxième menu, l'espacement avant et après ma barre de navigation est devenu beaucoup trop grand (lavieenlucie.com) pourtant, je n'ai rien changé.
    J'ai essayé de changer ce code : "/* ! Attention ! Nouveau code : Espacement avant et après la Barre de Navigation */
    div#barre_nav {
    margin-top: -55px; /* Espacement avant la Barre de Navigation */
    margin-bottom: 20px; /* Espacement après la Barre de Navigation */
    }"
    mais ça ne change rien...
    Est-ce que tu saurais de quoi ça peut venir ? :)
    Merci beaucoup !!
    Bonne journée
    Lucie

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Tu as quelques codes qui définissent l'espace autour de tes menus, en trop.
      Retrouve ce code :

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      background: #FEADAE;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
      }

      Supprime :

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

      Et rajoute cette ligne :

      margin-bottom: 0;

      Avant le signe } de ce code, comme ceci :

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

      Supprimer
  2. Je cherchais cette technique depuis longtemps, merci beaucoup :D

    RépondreSupprimer
  3. De quoi m'occuper ce week end donc !! merci

    RépondreSupprimer
  4. J'ai survolé l'article ... wow je sens que je vais attendre d'être au calme pour intégrer le tout à mon blog.

    Merci pour ce nouveau tuto ☺

    RépondreSupprimer
  5. C'était un vendredi soir totalement saoulant qui c'est transformé en soirée passionante. J'avais rien compris au début et j'avais tous mélanger, et le problème c'est que j'avais même pas fais de sauvegarde ! mais coup de chance, je savais comment aller en arrière et suprimé. J'était bloquer au niveau du même alignement, parce tous le menu se collait sur le côté gauche de la page, mais en faite j'avais oublier de couper les codes du " fond et bordure " de plus les padding avait changer, alors j'ai trouver un compromis ma barre et moi, l'allignement de la 1er barre restait ou elle est et la 2eme sur la droite et voilà. Se ne fut pas facile à comprendre mais je commence à comprendre un peu les codes CSS et c'est grace à toi et tes expliquication simple et parfaite ! Bon bref je sais que je suis bavarde mais je voulais juste te dire MERCI MERCI !

    RépondreSupprimer
  6. Bonjour Catherine j'ai un soucis (comme toujours :( ) Quand je met les codes Aligner les 2 menus sur une même ligne, mon menu déroulant reste dérouler .. Je t'ai fait un imprime écran je te la transmet sur facebook ..

    RépondreSupprimer
    Réponses
    1. Je t'ai répondu sur Facebook ;)

      Supprimer
    2. Bonjour,
      j'ai le même problème que Doux Bonheur : mon menu reste déroulé...
      Merci pour ta réponse :)

      Supprimer
    3. Bonjour Lola,

      Rajoute ces codes CSS :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Juste avant la ligne :

      /* Columns

      Supprimer
    4. Super merci :)

      Ton blog est une mine d'or !!

      Supprimer
  7. Re coucou Catherine

    Je t'ai laissé un com sur "fixer la barre....." et j'ai réussi à résoudre mon problème d'espace au dessus de la barre en faisant ce tuto lol.

    Mais bien sûr fallait bien que j'ai un autre bug lol, j'ai réussi à mettre mes icônes réseaux sociaux sur la même ligne mais mes 2 menus sont coupés, j'avais mis une ligne sous ma barre et là elle est coupée :/

    J'espère que tu pourras m'aider, merci d'avance.

    Bonne soirée
    Cdt Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Tu as le même problème que moi dans le tutoriel. Il faut déplacer les codes pour le fond et la bordure de tes anciens codes commençant par :

      #barre_nav ul {

      Et les coller dans le nouveau code :

      /* Apparence globale du menu */
      #barre_nav {
      }

      Supprimer
  8. Re ;)

    Je me rend compte quand faisant ce tuto ou d'autres je ne sais pas exactement, que j'ai plein de "bug" sur mon blog, la date est affichée alors qu'avant non, il y a n'y a plus d'espace entre mes articles et surtout j'ai pas mal de code CSS similaire dc je me demande si en suivant les tutos j'ai modifié les bons ou pas ?!

    Quand tu pourras et si tu veux (lol), est ce que tu peux m'indiquer les erreurs ?!

    Merci d'avance.
    Bonne soirée
    Jessica

    RépondreSupprimer
    Réponses
    1. J'ai répondu à ton mail ;)

      Supprimer
    2. Bonjour Catherine,

      Merci mille fois pour ton aide, je vais vite voir ton mail.

      Je viens de tester ce que tu m'as dit au dessus et c'est presque bon lol. La ligne est bien sur toute la longueur MAIS lorsque j'ai suivi tes tutos pour le fond d'article et la modif des liens "articles suivants" (dsl je n'ai pas retenu les noms) et bien ça a rajouté un fond sur ma barre de navigation et changé la police aussi, je ne pige pas pourquoi :/ Je dois avoir des choses en trop dans mes codes :/

      Merci encore, je te repond au mail au plus vite.
      Bizz
      Jessica

      Supprimer
    3. Il doit y avoir une petite erreur dans ton code CSS. Un oubli d'un signe { } : ; /* ou */ ou un signe en trop peut causer pas mal de problèmes. En fait tout ce qui va suivre cette petite erreur ne sera pas ou mal pris en compte par le navigateur.

      Supprimer
    4. A noter que tu as également un autre code CSS qui définit la couleur de fond de tes listes de liens (tes 2 menus) :

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      margin-top: none;
      margin-bottom: none;
      background: #FEFEFE;
      text-align: center;
      }

      Copie :

      background: #FEFEFE;

      Et colle cette ligne dans le nouveau code commençant par :

      /* Apparence globale du menu */
      #barre_nav {

      Supprimer
  9. ça ne marche toujours pas :/ du coup faut que je cherche dans tout le code voir où il peut y avoir une erreur :/

    et je me demandais pour la police du menu est ce que je peux aussi mettre les codes dans /* Apparence globale du menu */ vu que ça ne veut pas marcher ?! au cas où je ne trouve pas l'erreur.


    Merci

    RépondreSupprimer
    Réponses
    1. Il y a une ligne en trop dans ce code :

      /* Apparence globale du menu */
      #barre_nav {
      border-bottom: solid;
      border-top: none;
      border-bottom-color: #000000;
      border-bottom-width: 2px;
      border-top-color: #000000;
      border-top-width: 1px;
      border-top: none;
      background: #FEFEFE;
      background: none;
      }

      Tu as 2 fois une ligne commençant par background du coup elles entrent en conflit.
      Supprime cette ligne :

      background: none;

      Et ça devrait marcher ;)

      Supprimer
    2. Pour la police c'est ce code qu'il faut modifier :

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

      Il semblerait que tu ai 3 codes commençant par :

      /* Police et Couleur des Liens */

      Du coup elles entrent en conflit les unes avec les autres. Supprimes-en 2 et garde 1 seule version. Après le problème c'est que tes 3 versions n'ont pas les mêmes informations :/

      Supprimer
    3. et bien on est synchro, car en suivant ton tuto pour la barre des cookies j'ai decouvert un autre code "menu" et là les codes couleurs n'étaient pas bon et du coup j'ai réussi à mettre toutes les polices correctement, et en checkant mes mails je vois ta réponse du coup barre OK

      Mais j'aimerais réduire mes marges au niveau du début et de la fin de la barre , entre les mots mais aussi entre les "2" barres.

      où dois je chercher .!

      Je me disais aussi qu'il fallait supprimer des versions menus, mais lesquelles ?!

      Merciiiiiiiiiii

      Supprimer
    4. Bon ben je crois que j'ai réussi à supprimer 2 codes menus, ça a l'air d'être bon.

      Par contre sur le blog j'ai fait "inspecter l'élément et ça m'indique que j'ai des erreurs mais je n'y comprends rien de rien lol.

      Supprimer
    5. Quand tu dis réduire les marges "au niveau du début et de la fin de la barre" veux-tu dire diminuer l'espace à gauche et à droite ? Ou en haut et en bas ?

      Pour diminuer l'espace entre les liens de ton menu n°1, alors réduit la valeur de la ligne :

      margin-right: 10px;

      Du code :

      /* Police et Couleur des Liens */
      #barre_nav li a {
      font-family:'Dancing Script', sans-serif; /* Police du texte */
      text-transform: uppercase;
      font-size: 18px;
      font-style: normal;
      color: #7D0169;
      text-decoration: none;
      margin-right: 10px;
      }


      Pour rapprocher les 2 menus il faut réduire la valeur de la ligne :

      max-width: 1170px; /* Remplacer la valeur en pixels par la largeur de votre contenant */

      Du code :

      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 1170px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      }

      Supprimer
    6. j'ai réussi entre temps merci ;)

      J'aimerais juste réduire les marges à gauche et à droite de la barre et non entre les mots.

      Merci ;)

      Supprimer
    7. Re bonjour Catherine,

      Ça y est ma barre me plaît presque à 100%.
      Mais j'aimerais savoir s'il était possible de "resserrer" les icones et les mettre plus vers la droite de la barre, sans toucher au 1er menu ?!

      Je ne sais pas si je suis très claire.

      Merci d'avance.

      Bonne journée à toi.

      Bizz Jessica

      Supprimer
    8. Bonjour Jessica,
      Tu peux rajouter le code CSS ci-dessous qui permet de supprimer l'espace à droite des liens du 2e menu (et les déplacera également à droite du menu).

      /* Liens du 2e menu */
      .second-nav a {
      margin-right: 0 !important;
      }

      Rajoute ce code CSS à la suite des codes CSS pour ton 2e menu.

      Supprimer
  10. bon ben j'ai beau chercher je ne trouve pas où sont les erreurs, il manquait 2 ; mais ça n'a rien changé :/

    RépondreSupprimer
  11. Merci merci merci!!
    Cela fait un moment que j'essai j'avais bien tilter seule qu'il fallait faire deux menus mais après j'étais complètement perdue alors encore MERCI! Que ferions nous sans toi :D

    RépondreSupprimer
  12. Bonsoir ! Merci pour ce nouveau tuto c'est exactement ce que je cherchais, mais j'ai un petit souci concernant mes menus déroulants qui ne veulent plus se fermer et qui font un peu n'importe quoi... Est-ce que tu aurais une solution pour moi ? Merci beaucoup !

    http://moondies.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Nadège,

      Rajoute ces codes CSS :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Juste avant la ligne :

      /* Columns

      Supprimer
    2. Merci beaucoup pour ta réponse ! Malheureusement j'ai le même problème, la deuxième partie de ma barre de navigation a disparu, je ne sais pas trop comment faire pour la faire réapparaitre...

      Supprimer
    3. Bonjour Nadège,
      Ton 2e menu se trouve dans ton 1er menu c'est pour cela qu'il à disparu.
      Retourne sur le gadget de ton menu. A la fin de ton gadget tu as ceci :

      <ul class="second-nav">
      <li><a href="https://www.instagram.com/nadege_lbn/" title="Instagram"> <i class="fa fa-instagram"></i> </a></li>
      <li><a href="https://www.facebook.com/moondies/?ref=hl/" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      </ul>
      </ul></div>
      </div>

      Rajoute un </ul> avant la ligne :

      <ul class="second-nav">

      Et supprime le </ul> après la ligne :

      <li><a href="https://www.facebook.com/moondies/?ref=hl/" title="Facebook"><i class="fa fa-facebook"></i></a></li>

      Comme ceci :

      </ul>
      <ul class="second-nav">
      <li><a href="https://www.instagram.com/nadege_lbn/" title="Instagram"> <i class="fa fa-instagram"></i> </a></li>
      <li><a href="https://www.facebook.com/moondies/?ref=hl/" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      </ul></div>
      </div>

      Sauvegarde et ton 2e menu devrait réapparaître.

      Supprimer
    4. Ca y est ça marche c'est super ! Merci mille fois !

      Supprimer
  13. Bonjour, il se trouve que j'ai essayé de suivre ton tuto, mais j'ai un méga problème : mon menu déroulant apparait complètement... de plus, j'ai mon trait qui est censé se mettre en bas tout le long remonte en plein milieu à un moment donné ... s'il te plait peux-tu m'aider ? C'est la catastrophe ...

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Pour les menus déroulants ouverts ajoute ces codes CSS :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Juste avant la ligne :

      /* Columns

      Pour la bordure qui remonte, il faut que je regarde le problème sur ton blog mais je ne vois pas ton menu :/

      Supprimer
    2. Bonjour, j'ai mis ton code, ça fonctionne pour le menu déroulant (génial enfin il se referme!) mais le problème c'est que ça a fait disparaître l'autre partie de ma barre de navigation : barre de recherche et liens des réseaux sociaux ....
      En plus entre temps j'ai essayé de bidouller mon code, du coup je n'arrive plus à les séparer, ma barre de navigation l'ensemble est à gauche ...

      Supprimer
    3. Je t'ai envoyé un mail ;)

      Supprimer
  14. Bonjour !

    Merciiiiiiiiii !
    J'attendais avec impatiente ce tuto :) Tes articles m'aident beaucoup à changer l'aspect de mon blog. C'est top ce que tu fais !

    J'ai un petit soucis avec ma barre de navigation, j'ai bien suivi ton tuto, mais le menu déroulant reste afficher, je galère..

    Aurais-tu une petite solution ? Merci d'avance :)

    Mon blog : http://anaellecuisine.com

    RépondreSupprimer
    Réponses
    1. Bonjour Anaëlle,

      Pour les menus déroulants ouverts ajoute ces codes CSS :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Juste avant la ligne :

      /* Columns

      Supprimer
  15. Malgré le code donné à de multiples reprises dans les commentaires pour les menus déroulants, ça ne veut pas marcher...
    J'ai essayé de bidouiller un chuia et ai pu arranger la chose en rajoutant padding là où il fallait tout supprimer. ( /* Fond et Bordure de la Barre de Navigation */
    .tabs- inner . widget ul { ). Mais même comme ça, ça me fait un truc tout moche dès que je rentre le code pour tout mettre sur la même ligne. Après au fur et à mesure des étapes, ça s'empire: plus de background, décalage menus/ sous-menus, la barre de navigation qui empiète sur mon header...
    Aurais-tu une solution? :/

    http://anskaradtest.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème peut venir de plusieurs choses, une petite erreur dans le code HTML, des codes CSS à déplacer.
      Essaye à nouveau sur un blog test pour que je puisse voir le problème. Créé un nouveau blog, copie et colle ton menu dans sur ton nouveau blog. Ensuite sauvegarde le fichier de ton thème sur ton blog actuel (http://ladybirdr.blogspot.fr/2015/07/faire-une-sauvegarde-de-son-blog.html) et installe ce thème sur ton blog test. Suis ensuite le tutoriel pour séparer le menu en 2 parties. Si ça ne marche toujours pas envoie-moi le lien de ton blog test pour que je puisse y jeter un oeil ;)

      Supprimer
    2. Bonjour, j'ai toujours le même souci...

      Mon blog test n°2 ( http://testanska.blogspot.fr/ ) présente exactement les mêmes problèmes que lorsque je visualise les modifications avec le blog test n°1 avant d'enregistrer ( http://anskaradtest.blogspot.fr/ ).
      Je ne sais plus quoi faire... :(

      Supprimer
    3. Les menus sur les 2 blogs tests ne sont pas les mêmes.
      Part du menu sur ton blog test n°2.

      Tout d'abord il faut changer la couleur de fond de ton menu, comme expliqué à la fin de la partie "Aligner les 2 menus sur une même ligne"

      Ajoute donc ce code :

      /* Apparence globale du menu */
      #barre_nav {
      }

      Ajoute avant le signe } le code qui définit la couleur de fond :

      background: #dc143c;

      Comme ceci :

      /* Apparence globale du menu */
      #barre_nav {
      background: #dc143c;
      }

      Ensuite continue le tutoriel pour aligner les menus correctement.

      Pour finir, il faut rajouter les lignes suivantes pour corriger les menus-déroulants :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Supprimer
    4. Merci beaucoup!
      C'est beaucoup moins violent visuellement. ^^'
      Par contre, les sous-menus sont pas tout à fait alignés sous la barre nav 1. Pour régler ça, c'est padding qu'il faut modifier?

      Et j'avais oublier de demander quelque chose auparavant aussi... Ma barre de menu principal, depuis le début, je ne sais pas pourquoi mais elle est toute fine, les liens ne sont pas cadrés correctement dans le menu. En haut, il n'y a pas d'espace (quasiment). J'avais essayé en vain de régler ce problème en bidouillant, mais ça n'avait pas plus fonctionner. Aurais-tu une solution? :/

      Supprimer
    5. Bonjour,
      Sur ton blog Test Test, tu as une marge autour des liens + une marge à droite des liens qui se rajoute par dessus la première marge.

      Retrouve ce code CSS :

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

      Supprime la ligne :

      margin-right: 20px;


      Pour rectifier l'alignement des menus-déroulants retrouve ce code CSS :

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

      Ajoute !important après -15px puis ajoute la ligne suivante :

      padding-left: 5px;

      Comme ceci :

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

      Modifie la valeur de 5px pour modifier l'espace entre le bord des menus-déroulants et les liens.

      Supprimer
  16. Bonjour je me suis enfin penché sur ce tuto , impeccable j'ai eu mon menu déroulant resté déroulé mais j'ai régler le soucis en lisant les commentaires.
    Par contre il y a t'il moyens que lorsque l'on clique sur les icônes de réseaux sociaux cela s'ouvre dans une nouvelle fenêtre car la on quitte le blog . Sinon tout est parfait !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible ajoute simplement ceci :

      target="_blank"

      Après <a de chaque lien. Par exemple :

      <li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>

      Devient :

      <li><a target="_blank" title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>

      Supprimer
  17. Rebonjour ; il me reste un petit soucis avec ma barre le menu déroulant est trop éloigné de ma barre de navigation donc quand je clic sur catégories ma barre de sous menu je n'arrive pas à cliquer sur Beaute, nail art ou autres j'ai un espace trop important j'ai essayé de changer la valeur des distances entre barre des sous-catégories et barre de navigation en mettant différent px positif 10px 20px; ou -10px -20px ou en notant none; mais cela ne change rien :
    /* 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: none; /* Distance entre barre des sous-catégories et barre de navigation */
    je te laisse le lien de mon blog pour regarder : http://chezchouby.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies qu'il n'y a pas de marge "margin" à tes liens du menu. Si oui, remplace "margin" par "padding".

      Supprimer
    2. Impeccable le problème venait de là MERCI

      Supprimer
  18. Bonjour, je te remercie pour tes supers tutos, mais j'ai un petit soucis, impossible pour moi de mettre une couleur background à ma barre de navigation (alors que le code a l'air bon...)
    Voici le lien de mon blog http://lesouffledesmots.blogspot.fr

    Mon code donne ça :
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin: none;
    }

    /* Apparence globale du menu */
    #barre_nav {
    background: fbb1b2;
    border: none;
    border-color: #cf7071;
    border-width: 1px;
    }

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: Crushed;
    font-size: 27px;
    font-style: normal;
    text-decoration: none;
    color: #482831;
    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: normal;
    text-decoration: none;
    background: #F47CA1;
    }

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

    .tabs-outer {
    overflow: visible;
    }

    /* Aligner les 2 menus sur une même lige */
    #barre_nav ul {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    }

    /* Alignement du 1er menu à gauche */
    #barre_nav .first-nav {
    float: left;
    }

    /* Alignement du 2e menu à droite */
    #barre_nav .second-nav {
    float: right;
    }

    /* Définit une largeur maximale pour le contenant du menu */
    #barre_nav div {
    max-width: 1070px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
    margin: 0 auto;
    }

    #barre_nav ul ul {
    display: none !important;
    }

    #barre_nav ul li:hover ul {
    display: block !important;
    }

    /* Columns

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

      /* Alignement du 1er menu à gauche */
      #barre_nav .first-nav {
      float: left;
      }

      Remplace left par none comme ceci :

      /* Alignement du 1er menu à gauche */
      #barre_nav .first-nav {
      float: none;
      }

      Ensuite il manque le signe # avant le code couleur pour la couleur de ton fond ;)

      Supprimer
    2. Merci beaucoup de ta réponse ! En la lisant je me suis sentie très bête avec cette histoire de # hahaha...
      Sinon j'ai fait le tuto 100% pour l'en tête et le menu mais comme tu peux le voir ce n'est pas vraiment du 100%, y a-t-il une explication à ça ? Après je ne t'embête plus promis !

      Supprimer
  19. Bonsoir,
    Merci pour ce tuto mais j'ai un problème. Je n'arrive pas à trouver la ligne id="barre_nav">". Peut être parce que j'ai centré ma barre de navigation, je ne sais pas.
    J'aurai vraiment besoin d'aide. Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sapphire June,
      Tu utilises le gadget Pages pour ton menu, or ça ne marchera pas avec ce gadget. Il faut créer ton menu dans un gadget HTML/JavaScript comme expliqué en début de tutoriel : http://ladybirdr.blogspot.fr/2015/12/separer-votre-barre-de-navigation-en.html?showComment=1452771678581#creer

      Supprimer
  20. Bonjour Catherine, j'aurais besoin de tes connaissance encore une nouvelle fois ;) J'ai retiré la barre recherche de ma barre de navigation mais le soucis est que sa me fait un trait blanc sur le dessus et que tout est aligner à gauche et les icone à droite .. rien est centré malgré avoir supprimer la base de recherche il doit avoir un soucis dans mon code.

    Merci pour le temps que tu m'accorderas :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Pour le trait blanc, c'est à cause d'une bordure autour de ta barre de navigation.
      Pour la retirer retrouve ce code CSS :

      #barre_nav {
      max-width: 1400px;
      margin: 0 auto;
      }

      Et ajoute ceci avant le signe } :

      border: none !important;

      Comme ceci :

      #barre_nav {
      max-width: 1400px;
      margin: 0 auto;
      border: none !important;
      }


      Tes liens ne sont pas centrés car tu as séparé ton menu en 2 parties. Si tu souhaites centrer tes liens retrouve ce code :

      /* Alignement du 1er menu à gauche */
      #barre_nav .first-nav {
      float: left;
      }

      Et :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      }

      Remplace left et right par none, comme ceci :

      /* Alignement du 1er menu à gauche */
      #barre_nav .first-nav {
      float: none;
      }

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: none;
      }

      Sauvegarde, et voilà ;)

      Supprimer
    2. Merci Catherine :D
      Il me rester juste la barre blanche au dessus que je ne savais pas comment retirer :D

      Supprimer
  21. Tout d'abord merci pour ces supers tutoriels ils sont parfaits ils m'aident beaucoup !!
    Cela dit j'ai quelques problèmes : Je n'arrive pas à aligner mes 2 menus et à faire que mes pointillés au dessous de ma barre de navigation soient continus pourtant je pense avoir fait comme les explications. Voici mon code :
    /* Tabs
    ----------------------------------------------- */
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin-top: 5px;
    margin-bottom: 30px;
    border-bottom: dotted;
    border-bottom-color: #000000;
    border-bottom-width: 1px;
    border-top: none;
    border-top-color: #000000;
    border-top-width: 1px;
    }

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

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

    /* 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: normal;
    text-decoration: None;
    color: #A9A9A9;
    }

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

    /* Aligner les 2 menus sur une même lige */
    #barre_nav ul {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    }

    #barre_nav ul ul {
    display: none !important;
    }

    #barre_nav ul li:hover ul {
    display: block !important;
    }
    /* Apparence globale du menu */
    #barre_nav {
    border-top: 5px solid #dddddd;
    border-left: 5px solid #dddddd;
    border-right: 5px solid #dddddd;
    border-bottom: 5px solid #dddddd;
    }

    /* Alignement du 1er menu à gauche */
    #barre_nav .first-nav {
    float: none;
    text-align: left;
    }
    /* Alignement du 2e menu à droite */
    #barre_nav .second-nav {
    float: right;
    }
    /* Apparence des icônes Font Awesome du 2e menu */
    .second-nav .fa {
    font-size: 20px; /* Taille des icônes */
    }

    /* Columns
    ----------------------------------------------- */

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faut déplacer les codes pour la couleur de fond et les pointillés dans le code commençant par :

      /* Apparence globale du menu */
      #barre_nav {

      Tu peux ensuite continuer le tutoriel pour placer correctement tes 2 menus ;)

      Supprimer
  22. Bonjour,
    Depuis hier je suis en train de changer l'apparence de mon blog (www.leelouetaddictions.fr) grâce à vos supers conseils & tutos.

    Cependant j'ai deux petits problèmes ... J'ai essayer de fixer la barre de navigation en haut du blog & quand on descend, comme expliquer dans un autre article, mais cela ne fonctionne pas & je ne comprends pas pourquoi.
    Le deuxième problème est l'alignement des deux menus sur la même ligne ... Même problème cela ne fonctionne pas alors que je pense avoir bien collé les codes.

    Merci en tout cas car votre blog est une mine d'or :)

    RépondreSupprimer
    Réponses
    1. Bonjour Lee Lou,
      Le code HTML de ton menu ne se trouve pas au bon endroit, c'est pour ça que le code donné pour fixer le menu ne marche pas sur lui. Ton menu se trouve dans la partie header et non plus dans la partie tabs.
      Du coup utilises le code CSS suivant pour fixer ton menu en haut du blog :

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

      N'oublie pas d'ajouter une couleur de fond à ton menu sinon il sera transparent. Pour cela ajoute la ligne :

      background: #ffffff;

      Avant le signe } de ce même code :

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

      L'alignement des 2 menus me semble OK de mon ordi.
      Si tu souhaites déplacer le 2e menu (avec les icônes) vers le bas, alors ajoute la ligne suivante :

      margin-top: 5px; /* Espace au-dessus */

      Avant le signe } de code CSS :

      #barre_nav .second-nav {
      max-width: 260px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      }

      Comme ceci :

      #barre_nav .second-nav {
      max-width: 260px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      margin-top: 5px; /* Espace au-dessus */
      }

      Remplace 5px par la valeur de ton choix. Une valeur positive déplacera le menu vers le bas, une valeur négative vers le haut.

      Supprimer
  23. Merci beaucoup pour ton aide !
    Entre temps & à force de chercher pendant des heures j'ai finit par réussir à aligner mes 2 menus :)
    Pour ce qui est de rendre mon menu fixe, effectivement ça marche bien lorsque je remplace :
    .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;
    background: #ffffff;
    }

    Le seul problème qu'il me reste c'est que du coup je perds tout l'alignement de mon menu (Texte & icônes) & du coup mon menu déroulant n'est plus de chaque côté de l'écriture du logo du blog mais en plein milieu, ce qui est un peu illisible.
    J'ai essayer de changer :
    /* Centrer la Barre de Navigation + Largeur des Liens et de la Barre de Navigation */
    /* Alignement du 1er menu à gauche */
    /* Alignement du 2e menu à droite */
    /* Définit une largeur maximale pour le contenant du 1e menu */
    /* Définit une largeur maximale pour le contenant du 2e menu */
    Mais ça ne change rien (ou alors je m'y prends très mal)... Est-ce que tu peux m'aider une nouvelle fois ?

    RépondreSupprimer
    Réponses
    1. Bonjour Lee Lou,
      Il faut maintenant définir une largeur maximale au contenant de tes 2 menus, comme expliqué à la fin du tutoriel. Cela centrera ton menu.

      Il faudra aussi ajouter un espace avant ton logo pour le déplacer vers le bas. Utilise ce code :

      #header-inner img {
      margin-top: 46px; /* Espace au-dessus du logo */
      }

      Remplace 46px par la valeur de ton choix ;)

      Supprimer
  24. Tout est OK ! Merci beaucoup pour ton aide :)

    RépondreSupprimer
  25. Bonjour Catherine,
    J'ai moi aussi rencontré un petit problème que je n'ai pas trouvé dans les commentaires précédents!
    Depuis que j'ai séparé mon menu en deux, les éléments ne sont pas posés au même niveau, ceux de gauche me semblent trop haut.
    J'ai aussi ajouté le code pour avoir une largeur maximale, mais j'ai du faire une bêtise... ça ne fonctionne pas!
    (voici le blog en question http://loubonelli.blogspot.fr)
    Si vous avez un peu de temps pour m'aider j'en serais ravie!

    En attendant, merci pour tous ces tutos vraiment utiles,

    Lou.

    RépondreSupprimer
    Réponses
    1. Bonjour Lou,

      Tu peux ajouter un espace au-dessus des liens du premier menu avec le code CSS suivant :

      .first-nav a {
      padding-top: 3px !important;
      display: block;
      }

      Supprimer
    2. Youpi! Ça marche! :)
      Merci beaucoup d'avoir pris le temps de répondre!
      Bonne soirée!

      Supprimer
  26. Coucou, sur mon blog test (http://blogtestmiss.blogspot.fr/) j'ai voulu faire des boutons de réseaux sociaux dans le footer tout en bas, donc j'ai réuqqi à les créer en utilisant la technique de cet article, mais ensuite je ne sais pas ou mettre et quels codes mettre pour les modifier. Surtout que déjà chaque réseau social est l'un en dessus de l'autre avec une puce à gauche. J'espère que tu va pouvoir m'aider et bonne continuation ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réglé le problème non ? Les icônes ont une apparence personnalisée :)

      Supprimer
  27. Bonjour ^^

    Je voulais tout d'abord vous remercier. Vos conseils et tutoriels sont vraiment à la fois précieux et très bien expliqués.
    Mais j'avoue avoir quelques petits problèmes :

    Tout d'abord, le fait d'avoir séparé les deux barres a rendu visible en permanence mes sous-menus (Bon la,ils sont en blancs donc pas vraiment visible).

    Ensuite, je souhaiterais faire un sous-menu du sous-menu. J'avais donc rajouté ce que vous aviez donné en commentaire à un autre utilisateur, mais rien à faire. L'affichage se limite à un sous-menu.
    Le code HTML est pourtant bon, cela doit donc être le CSS.

    Si vous pouviez m'aider, je vous en serai très reconnaissant.
    Cordialement

    Voici mon code :
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin-bottom: 10px;
    margin-left: 100px;
    }
    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {

    }
    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: Arial;
    font-size: 16px;
    font-style: bold;
    color: #FA0101;
    margin-right: 20px;
    }
    /* 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: standard;
    text-decoration: underline;
    color: #011FE6;
    }
    /* Centrer la Barre de Navigation */
    .tabs .widget li, .tabs .widget li {
    display: inline-block;
    float: none;
    }

    .tabs-outer {
    overflow: visible;
    }

    /* 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;
    }


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

    .tabs .widget li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px; /* Largeur de la barre des sous-catégories */
    }

    .tabs .widget li:hover li a {
    background-color: #4490E6; /* Couleur du fond du lien */
    }

    .tabs .widget 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: 0px; /* Distance à gauche des liens */
    padding-right: 60px;
    text-align: left;
    }

    .tabs .widget ul ul a {
    color: #ffffff; /* Couleur des liens sous menu*/
    }

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

    .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;
    }
    /* Aligner les 2 menus sur une même lige */
    #barre_nav ul {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    }

    /* Apparence globale du menu */
    #barre_nav {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #7ED9F4;
    text-align: center;
    border-width: 10px;
    }

    /* Alignement du 1er menu à gauche */
    #barre_nav .first-nav {
    float: none;
    text-align: left;
    }

    /* Alignement du 2e menu à droite */
    #barre_nav .second-nav {
    float: right;
    }

    /* Définit une largeur maximale pour le contenant du menu */
    #barre_nav div {
    max-width: 1060px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
    margin: 0 auto;
    }
    /* Columns

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout d'abord pour les menus déroulants, rajoute les codes CSS suivants :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Ensuite, rajoute la ligne suivante :

      overflow: visible;

      Avant le signe } du code suivant :

      /* 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;
      }

      Supprimer
  28. Bonjour, merci énormément pour ce tuto et les autres ! Mon blog est tout joli maintenant :p Cependant j'ai quelques détails qui me tracassent ! Je souhaiterais agrandir ma barre de navigation afin qu'elle fasse la longueur de ma "partie blanche" je ne sais comment l'expliquer... Et ensuite j'aimerais que les liens vers mes réseaux sociaux ouvrent une autre page à chaque fois histoire que mes visiteurs ne partent pas de mon blog. Bisous Bonne soirée, t'es la médaille d'or du HTML XD

    RépondreSupprimer
  29. Oh j'ai oublié de mettre l'adresse de mon blog : http://geeketteetrougealevres.blogspot.fr/

    ^^

    RépondreSupprimer
  30. 3ème message... Décidément, je suis fatiguée ce soir ! Excuse moi mais je me suis mal exprimée concernant la longueur de la barre de navigation... Je voudrais qu'elle colle mon "en-tête" et qu'elle fasse sa même longueur. Ça serait plus joli. Excuse moi du dérangement. Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout d'abord il faut supprimer la marge que tu as ajouté autour de ton menu. Pour cela, retrouve ce code CSS :

      /* Apparence globale du menu */
      #barre_nav {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      margin-right: 10px;
      border: solid;
      border-color: #F79999;
      border-width: 2px;
      background: #f4cccc;
      }

      Remplace la valeur de toutes les lignes commençant par margin du code ci-dessus par 0, comme ceci :

      /* Apparence globale du menu */
      #barre_nav {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      border: solid;
      border-color: #F79999;
      border-width: 2px;
      background: #f4cccc;
      }

      Ensuite il faut rectifier l'espace à gauche et à droite de ton menu en ajoutant le code CSS suivant :

      .region-inner.tabs-inner, .tabs-inner .tabs {
      margin: 0 !important;
      padding: 0 !important;
      }

      Juste avant la ligne suivante de ton code :

      ]]></b:skin>

      Supprimer
  31. Bonjour Catherine :)

    Merci pour tes tutos, j'ai parfaitement réussis à créer une deuxième barre de navigation sur la même ligne que la première, seulement, amlgrès tes conseils je n'arrive pas du tout à modifier l'apparence de la 2e, elle reste toujours identique à la première, voici le code que j'ai utilisé, je dois avoir fait une erreur :

    /* Apparence des liens du 2e menu */
    .second-nav a {
    font-family: Amatic SC;
    font-size: 10px;
    font-style: normal;
    text-decoration: none;
    color: #00D984;
    margin-right: 70px;
    margin-left: 60px;
    }


    /* Apparence des liens du 2e menu quand survolés par la souris */
    .second-nav a:hover {
    font-family: Amatic SC;
    font-size: 10px;
    font-style: normal;
    text-decoration: none;
    color: #107549;
    margin-right: 70px;
    margin-left: 60px;
    }

    /* Columns


    Merci pour tes conseils !
    Continue ainsi :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies tout d'abord que tu as bien nommé ton 2e menu second-nav avec le code HTML suivant :

      <!-- début de la 2e partie du menu -->
      <ul class="second-nav">

      Ensuite vérifies qu'il n'y a pas d'erreur avant tes codes CSs pour ce 2e menu : un oubli d'un des signes suivants, ou un signe en trop, et e codes CSS qui suivent sont mal ou pas pris en compte.

      Les signes à vérifier sont : ; { } /* et */

      Supprimer
  32. Bonjour,

    Je vous remercie de votre réponse rapide.

    Je viens de tester et le problème est quasi-résolu. J'ai mes deux sous-menus. Le problème résident désormais, c'est que tous les sous-menus s'affichent en même temps.

    Pensez-vous qu'il serait possible de n'afficher que le premier sous-menu et ensuite, seulement si on passe la souris, afficher le deuxiéme ?

    en vous remerciant par avance,
    Whiteaker

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui ça devrait marcher. Peux-tu me donner le lien vers ton blog pour que je puisse regarder le problème ?

      Supprimer
    2. Oui bien sûr. C'est : http://aventures-livres.blogspot.fr/ mais du fait du problème, j'ai actuellement mis un autre code. Si tu as besoin que je remette le code, dites-le moi ^^

      Supprimer
    3. Bonjour,
      Oui j'ai besoin de voir le code pour voir d'où peut venir le problème :)
      Met-le aujourd'hui ou Lundi car je ne pourrai pas regarder pendant le weekend.

      Supprimer
    4. Bonjour,
      D'accord, je vais le remettre aujourd'hui jusqu'à 23h, puis si vous n'avez pas pu le voir, je le remettrai Lundi toute la journée à partir de 8h.
      Merci d'avance

      Supprimer
    5. Bonjour,
      Essaie de déplacer le code CSS suivant :

      #barre_nav ul ul {
      display: none !important;
      }

      Juste après le code qui le suit :

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Comme ceci :

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      #barre_nav ul ul {
      display: none !important;
      }

      De plus, remplace la première ligne du 2e code CSS :

      #barre_nav ul ul {

      Par :

      #barre_nav ul li ul {

      Sauvegarde et dis-moi ce que ça donne.

      Supprimer
    6. Bonsoir,
      Je vous remercie pour tous vos efforts. Malheureusement, cela n'a rien changé et les sous-menus s'affichent toujours tous en même temps.
      :(

      Supprimer
    7. Bonjour,
      Dans ce cas, essaye de remplacer la ligne :

      display: inline-block !important;

      Du code CSS suivant :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Par :

      display: inline-block;

      Comme ceci :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Supprimer
    8. Eh bien, il faut croire que le bug n'est toujours pas résolu ^^
      Je rêve de vous dire que cela a marché mais malheureusement non ^^
      Je suis toujours intéressé, mais je comprendrais si vous souhaitez toujours chercher. Si tel est le cas, je laisserai le code pour que vous puissiez regarder ^^

      Supprimer
    9. C'est quand même étrange que ça ne fonctionne pas :/
      Il y a un conflit entre tes codes CSS quelque part. Il faut trouver lequel ^^

      Supprimer
    10. Tu peux essayer d'ajouter ces codes CSS :

      #barre_nav ul.first-nav li ul {
      display: none;
      }

      #barre_nav ul.first-nav li:hover ul {
      display: block;
      }

      Après les codes CSS de ton menu déroulant.

      Supprimer
    11. Je comprends votre perplexité. Je ressens la même chose. Cela ne marche toujours pas.

      Un ami qui a fait du CSS durant ces études et à qui j'avais montré le code, m'a aussi parlé de conflit et qu'il y avait des instructions en trop selon lui.

      Peut-être cela pourrait-il aider ? En attendant, je vous remercie de toute votre attention à mon problème. ^^
      Dites-moi si je peux faire quelque chose pour vous aider (si vous souhaitez que je remette le code sur le blog à un moment pour que vous puissiez le voir ?)

      Supprimer
    12. Bonjour,
      Encore un essai ;)

      Remplace ce code CSS du tutoriel :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Par :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav > ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Supprimer
  33. Bonjour,
    Je voudrais d’abord te remercier pour tes articles qui sont vraiment super utiles pour moi :D
    Par contre j'ai un problème avec ce Tuto, ma barre est divisé en deux et elle ne fait plus toute la largeur de la page...
    Je te laisse l'adresse de mon blog pour que tu vois l'étendu des dégâts haha (http://watercolor-cake.blogspot.fr)
    Si jamais tu as une solution pour ça ce serait génial...
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faut suivre les étapes à la fin du tutoriel, à partir de "Aligner les 2 menus sur une même ligne". Il faut ajouter les codes qui définissent la couleur de fond, bordure, etc., de tes menus dans le code donné ;)

      Ensuite pour aligner ton premier menu avec le 2e, il faut rajouter les lignes suivantes :

      padding-top: 9px;
      padding-bottom: 4px;

      Avant le signe } du code CSS suivant :

      /* Alignement du 1er menu à gauche */
      #barre_nav .first-nav {
      float: none;
      text-align: left;
      }

      Supprimer
    2. Super, ça marche ! Merci beaucoup :)
      En fait, pour "apparence globale du Menu" au lieu de #barre_nav {, j'avais #barre_nav ul { et en enlevant le "ul" ça à marché!
      Encore merci :)

      Supprimer
    3. Merci beaucoup ça à marché,
      par contre je n'arrive pas à modifier l'écart entre mes boutons CSS j'ai tellement bidouillé que j'ai réussi à supprimer ma barre de recherche...

      Supprimer
    4. Bonjour,
      Tout d'abord tu as ajouté un espace dans le code HTML de ton 2e menu, dans le lien Facebook. Remplace le code HTML de ton 2e menu :

      <ul class="second-nav">

      <!-- les liens du 2e menu vont ici -->



      <!-- boutons CSS -->

      <li><a target="_blank" title="Pinterest" href="https://fr.pinterest.com/Watercolorcake/"><i class="fa fa-pinterest-square"></i></a></li>

      <li><a title="facebook" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook-official"></i>

      </a></li><li><a target="_blank" title="Pinterest" href="https://www.instagram.com/watercolorcake/"><i class="fa fa-instagram"></i></a></li>

      </ul>

      Par :

      <ul class="second-nav">

      <!-- les liens du 2e menu vont ici -->

      <!-- boutons CSS -->

      <li><a target="_blank" title="Pinterest" href="https://fr.pinterest.com/Watercolorcake/"><i class="fa fa-pinterest-square"></i></a></li>

      <li><a title="facebook" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook-official"></i></a></li>

      <li><a target="_blank" title="Pinterest" href="https://www.instagram.com/watercolorcake/"><i class="fa fa-instagram"></i></a></li>

      </ul>

      Tu as dû supprimer ton champ de recherche directement dans le code HTML car je ne le vois pas. Rajoute-le en suivant à nouveau le tutoriel.

      Ensuite, pour ajuster l'espace entre les icônes des réseaux sociaux, il faut définir la marge des liens pour le 2e menu seulement. Colle ces codes CSS :

      /* Apparence des puces du 2e menu */
      .second-nav li {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      /* Apparence des liens du 2e menu */
      .second-nav li a {
      margin: 0 !important;
      padding-left: 4px; /* Espace à gauche des icônes sociaux du menu */
      padding-right: 4px; /* Espace à droite des icônes sociaux du menu */
      }

      Avant la ligne :

      /* Columns

      Remplace la valeur de 4px des lignes :

      padding-left: 4px; /* Espace à gauche des icônes sociaux du menu */
      padding-right: 4px; /* Espace à droite des icônes sociaux du menu */

      Par l'espace en pixels que tu souhaites avoir de chaque côté des icônes.

      Supprimer
    5. Super, génial, ça marche, merci beaucoup !

      Supprimer
  34. Coucou, j'ai un tout petit soucis que je n'arrive pas à régler : la partie "gauche" du menu ne se cale justement pas à gauche mais reste centrée, alors que la partie droite s'est bien mise à droite.
    Je n'arrive pas à voir d'où cela peu venir, pourrais-tu m'aider ? Merci !!

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Peux-tu me donner le lien de ton blog pour que je puisse regarder d'où peut venir le problème ?

      Supprimer
    2. Alors c'est : http://5minutesparici.blogspot.fr/

      Supprimer
    3. Retrouve ton code CSS suivant :

      /* Apparence globale du menu */
      #barre_nav {
      text-align: center;
      background-color: #000000;
      padding: 0;
      margin: 0;
      }

      Remplace la ligne :

      text-align: center;

      Par :

      text-align: left;

      A noter que tu as défini une largeur maximale de ton menu à 1000px or le contenant de ton blog est de 1300px. Si tu souhaites aligner les menus avec les bords de la zone de ton blog, retrouve ce code CSS :

      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 1000px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      }

      Remplace 1000px à la ligne :

      max-width: 1000px; /* Remplacer la valeur en pixels par la largeur de votre contenant */

      Par 1300px et voilà ;)

      Supprimer
    4. Génial, ça marche nickel ! Merci beaucoup !!!

      Supprimer
  35. Coucou ! :)
    J'ai bien suivi ce tuto, et tout marchait bien jusqu'aux dernières étapes (mais je ne sais plus laquelle :/). En fait, c'est un menu déroulant que j'ai (sur ton modèle évidemment), mais du coup les sous-catégories s'affichent même quand on ne passe pas la souris sur les principales :/ Saurais-tu comment régler ça ? Du coup j'ai tout retiré, ça m'a fait mal au coeur ahah x)
    Merci d'avance ! :)
    Léa
    http://lectureavie.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Léa,
      Essaie de remplacer le code ci-dessous du tutoriel :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Par :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav > ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Supprimer
  36. bonjour,
    tout d'abord merci pour la générosité de ces tutos très bien faits. Pour preuve, je suis arrivée à installée mes deux boutons de réseaux sociaux et c'est à partir de là que je coince!!! Quand j'ai voulu les aligner, tout s'est superposé! que dois-je faire?
    Merci d'avance pour l'aide.
    Cecile
    htttp//:latelierdelalibellule.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Cécile,
      Il y a des erreurs dans le code HTML de ton menu. Ton 2e menu avec les icônes des réseaux sociaux est à l'intérieur de ton 1er menu. Remplace le code HTML de ton menu par ce code corrigé :

      <div id="barre_nav">
      <div>

      <ul class="first-nav">
      <li><a title="Actualité" href="http://latelierdelalibellule.blogspot.fr/search?updated-min=2015-01-01T00:00:00%2B01:00&updated-max=2016-01-01T00:00:00%2B01:00&max-results=8">Actualité</a></li>
      <li><a title="Illustration" href="http://latelierdelalibellule.blogspot.fr/p/illustration.html">Illustration</a></li>
      <li><a title="Textile" href="http://latelierdelalibellule.blogspot.fr/p/textile.html">Textile</a></li>
      <li><a title="l'atelier" href="http://latelierdelalibellule.blogspot.fr/p/atelier.html">l'atelier</a>
      <ul>
      <li><a href="http://latelierdelalibellule.blogspot.fr/p/les-creations-de-latelier.html">les créations</a></li>
      <li><a href="http://latelierdelalibellule.blogspot.fr/p/ateliers.html">ateliers créatifs</a></li>
      <li><a href="http://latelierdelalibellule.blogspot.fr/p/les-interventions.html" les="" interventions"="">les interventions</a></li>
      </ul>
      </li>
      <li><a title="à propos" href="http://latelierdelalibellule.blogspot.fr/p/a-propos.html">à propos</a></li>
      <li><a title="Contact" href="http://latelierdelalibellule.blogspot.fr/p/contact.html">Contact</a></li>
      </ul>

      <!-- début de la 2e partie du menu -->
      <ul class="second-nav">

      <!-- les liens du 2e menu vont ici -->

      <li><a title="facebook" href="https://www.facebook.com/Latelier-de-la-libellule-Cecile-Drevon-illustration-142861662493088/timeline/" image.jpg"="" alt=""><i class="fa fa-facebook"></i>
      </a></li>
      <li><a title="pinterest" href="https://fr.pinterest.com/ceciledrevon" image.jpg"="" alt=""><i class="fa fa-pinterest"></i></a></li>

      </ul>
      <!-- fin de la 2e partie du menu -->

      </div>

      Continue le tutoriel avec ce code HTML ;)

      Supprimer
  37. Bonjour,
    J'ai suivi ce tuto pour faire deux menus de navigation. Sauf qu'au lieu de placer ces deux menus sur une même ligne, j'aimerais que l'un soit positionné tout en haut et que l'autre soit placé juste avant les articles (sous la bannière).
    Merci de m'éclairer. Je galère depuis plusieurs semaines!
    Mon blog : http://laboecolo.blogspot.com/
    A+

    RépondreSupprimer
    Réponses
    1. Bonjour Schtroumpfette,
      Le problème vient tout simplement du code qui fixe ton premier menu en haut du blog. Il fixe le contenant des 2 menus en haut du blog. Retrouve ton code :

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

      Et remplace-le par :

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

      Et voilà ;)

      Supprimer
  38. Bonjour ! Merci pour ce tutoriel (j'ai longtemps cherché avant d'en trouver des aussi clairs que les vôtres, et surtout aussi détaillés).

    Je l'ai suivi et je me posais 3 questions (pour quand vous aurez le temps hein ^^!)

    - j'aimerais avoir les bordures de ma barre de navigation qui aillent d'un bout à l'autre de la fenêtre, je ne sais pas cependant comment modifier cette valeur (c'est celle de la largueur du contenu ? J'aimerais garder le contenu du blog centré (les articles) mais juste avoir les bordures sans fin comme sur cet exemple :
    http://i86.servimg.com/u/f86/12/03/39/39/exempl10.png
    Alors que pour l'instant ça a cet aspect :
    http://i86.servimg.com/u/f86/12/03/39/39/exempl12.png)
    Comment faire ? Sur l'exemple également les icônes du second menu ne sont pas complètement déportés sur la gauche. J'aimerais bien faire pareil mais je ne sais pas comment formuler ça en code css :s

    - Je ne suis pas sûre d'avoir compris comment modifier la couleur des icônes fontawesome en mouse over. Pour l'instant j'ai rentré /* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
    .second-nav .fa:hover {
    color: #E3BA6E;
    }

    Mais je me doute qu'il manque un truc. Pour l'instant quand on passe la souris sur l'îcone on a un trai qui apparait en dessous, comme pour les liens du menu de gauche, et c'est tout.

    Sachant que pour modifier la couleur des icônes fontawesome j'ai rentré, dans le menu de la barre de nagivation (mise en page >> gadget du menu) un code (href='#' style='color:#6B7227;')directement après 'fa fa-facebook' (ou g+ etc.) trouvé sur un tutoriel anglais (c'était avant de découvrir votre chouette blog. Cela fonctionne mais ça entre peut-être en conflit ?

    Voilà, merci beaucoup, je sens que je vais encore passer beaucoup de temps sur votre blog afin d'arriver à m'en faire un à peu près présentable :)

    RépondreSupprimer
    Réponses
    1. Bonjour Shan Millan,
      Je vois que tu as réussi à mettre ton en-tête et ton menu à 100% de largeur ;)

      Pour les couleurs des icônes, le code que tu as entré dans le code HTML peut en effet entrer en conflit.
      Pour supprimer la bordure sous les icônes au survol de la souris, rajoute :

      text-decoration: none;

      Avant le signe } de ton code CSS :

      /* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
      .second-nav .fa:hover {
      color: #E3BA6E;
      }

      Tu peux aussi changer la première ligne du code :

      .second-nav .fa:hover {

      Pour :

      .second-nav .fa:hover, .second-nav a:hover {

      Pour éviter d'autres conflits éventuels avec les liens de ton menu. Ton nouveau code CSS est donc :

      /* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
      .second-nav .fa:hover, .second-nav a:hover {
      color: #E3BA6E;
      text-decoration: none;
      }

      Supprimer
    2. Bonjour Catherine ! Oui, je suis vraiment tout tes tutos un à un (que je garde ou pas ensuite le résultat) je m'amuse comme une folle :D ! Je n'y connaissais rien au CSS et du coup j'ai l'impression d'être une magicienne à chaque fois que je teste une nouvelle mise en page :) !

      Et bref, du coup je suis finalement tombée sur ton tuto pour mettre le menu à 100% ! Bon, ça a fait que le contenu du blog cache le menu mais j'imagine que ça doit être à cause d'un réglage quelque part qu'il faudrait que je change.

      Je vais suivre tes nouvelles recommandations en tout cas, merci beaucoup !

      Je pense que j'ai du plusieurs fois créé des conflits sans le vouloir (le titre du blog n'a pas la bonne taille ni la bonne police, et les dates des articles ont disparu :D, dans le menu latéral j'ai beau mettre tout en grand, ça s'affiche tout petit... Mais je persévère ! Je m'amuse bien même si je casse un peu tout ! C'est vraiment rigolo de tout tester.

      Merci à toi pour ton super blog !

      Supprimer
  39. Hello Catherine! Merci pour ce tutoriel!
    J'aimerais utiliser ces icônes afin de me faire une "barre d'icône réseaux sociaux" dans ma barre latérale. Avec une image au dessus,
    comment dois-je m'y prendre?
    Je te laisse le lien de mon blog si tu en as besoin.
    http://www.lusineaplumes.com/

    Merci beaucoup!
    Laëtitia (l'usine à plumes)

    RépondreSupprimer
    Réponses
    1. Bonjour Laëtitia,
      Tu peux t'inspirer du tutoriel pour créer des boutons CSS (je vois que tu l'as déjà suivi). Remplace le texte des liens par les codes des icônes donnés ci-dessus. Et n'oublie pas d'installer FontAwesome avant, comme expliqué dans ce tutoriel ;)

      Supprimer
  40. Bonjour,

    Encore merci pour ce tuto.
    J'aimerai que ma barre de menu parcoure la totalité de mon haut de page en largeur. Je n'arrive pas à modifier la taille. Du coup, je me retrouve avec une barre assez petite et pas centrer.
    Peux-tu m'aider ?
    Mon blog est : http://julescoton.blogspot.be/

    Mille mercis !

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Tu peux suivre ce tutoriel : http://ladybirdr.blogspot.com/2015/08/modifier-la-largeur-de-len-tete-et-du.html

      Supprimer
  41. Salut! Merci beaucoup pour tous ces tutos, j'ai pu embellir mon blog! J'ai cependant un petit problème avec ma barre de navigation séparée en deux, j'aimerais que mon menu avec les icônnes des réseaux sociaux soient un peu plus éloignés du bord (je ne sais pas si tu comprend(x ) parce que en ce moment, elles sont collées au bord et je ne trouve ça pas très beau :-/
    Voici le lien http://bazardelivres.blogspot.fr/
    Merci d'avance pour ton aide ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter une petite marge à la 2e barre de navigation en rajoutant :

      margin-right: 20px; /* Espace entre le bord de la page et le menu */

      Avant le signe } de ce code CSS :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      }

      Supprimer
  42. Aaaah ! Pour une fois que je réussis d'un seul coup ! Merci. :)

    RépondreSupprimer
  43. Bonjour.

    Déjà, merci pour tous ces tutos, j'ai l'impression d'être hyper douée grâce à vous, c'est un bonheur!! J'ai réussi à modifier pas mal de petits trucs sur mon blog, mais je bloque sur ce tuto.

    J'ai réussi à créer les deux barres de navigation, à les séparer, les centrer, bref, à peu près tout mais mon problème c'est que sur ma deuxième barre, celle de droite, je n'ai pas de fond blanc, du coup, ça fait bizarre.
    Mon blog: http://lecturesdelyuna.blogspot.fr

    J'ai essayé de rajouter un fond dans le deuxième menu mais ça fait fond blanc juste sous les logos... Avez-vous une idée de ce qu'il faudrait que je modifie?

    Merci d'avance et bonne journée :)

    RépondreSupprimer
    Réponses
    1. Bonjour Elyuna,
      Il semble que tu as réglé le problème ?

      Supprimer
    2. Non je n'ai pas réglé le problème, j'ai finalement opté pour une autre solution.

      J'avais fixé ma barre en haut de ma page mais le fond blanc n'apparaissait que ce soit sur l'une ou l'autre des parties, uniquement sous les "textes" et du coup, ma barre ne ressemblait à rien puis que j'avais une partie blanche avec mon texte et le reste avec mon blog en fond...
      Pour arrêter ça, j'ai donc remis la barre a sa place normal et mis le fond en transparent puisque le fond de mon blog est blanc!! Ce qui d'une certaine façon a réglé le problème mais pas de la façon voulu!

      En tout cas, merci beaucoup pour la réponse et pour tous ces tutos!!

      P.S: J'ai posté un autre problème sous un autre tutoriel où là j'ai finalement trouvé toutes mes réponses à mes questions sous d'autres tutos (pas besoin de s'en occuper du coup ;-)).

      Mille mercis une nouvelle fois!!

      Supprimer
  44. Bonjour!!!! Merci merci merci pour tous ces tutos qui me sauvent la vie! C'est super de nous faire partager toutes tes connaissances!

    Alors pour ma part j'ai bien tout suivi et malgré quelques micro crises de nerfs devant mon ordi j'ai tout de même réussi, mais (oui il a toujours un "mais" dans les commentaires qu'on te laisse ah ah)il y a un espace blanc entre la fenetre de navigation et ma barre de menu, je pense que le problème vient du body de mon blog mais j'ai un peu peur de toucher à n'importe quoi lol, crois tu que tu réussirais à me trouver la solution pour que ma barre de menu prenne toute la largeur? (J'ai essayé de mettre 100% ds la largeur max du contenant mais ça ne marche pas ...)

    http://myhealthylifeinparis.blogspot.fr

    RépondreSupprimer
  45. Ahhhh je pense que c'est bon j'ai trouvé! Je suis allé sur un autre de tes tutos (l'en-tête a mettre en dehors du corps du blog) et puis je suis tombé sur cette partie du code :
    .tabs-outer {
    position: fixed;
    top: 0;
    width: 100%;
    left: -30px;

    j'ai modifié left en le passant de 0 à -30 et c'est bon, ma barre de menu est un vrai bandeau :D (J'espère que je n'ai pas fait de bêtise en faisant ça)

    Encore merci pour ce blog si génial!

    RépondreSupprimer
  46. Hello!

    Je suis tombée sur ce merveilleux tuto qui correspond exactement à ce que je voudrais!
    J'y suis presque, mais quelques bugs:
    1) La barre de menu 2 à droite dépasse de la bordure (je ne sais pas pourquoi, cela l'a fait dès que j'y ai inclu la barre de recherche)
    2) J'aimerais resserrer les icônes des réseaux sociaux qui sont trop éloignées les unes des autres
    3) J'ai beau rentrer la largeur maximale de mon blog, voire une donnée inférieur, les menus restent scotchés à chaque extrémité de la fenêtre.

    Pourrais-tu me donner un petit coup de main, j'ai beau bidouiller depuis 3 jours je ne trouve pas la solution? Voici l'adresse de mon blog test, merci d'avance :)
    http://llcblogtest.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Caroline,
      As-tu toujours ce problème ?

      Supprimer
    2. Bonjour! J'ai finalement acheté un design car je bloquais vraiment trop dessus!

      Supprimer
    3. Hello moi par contre j'ai a peu près les mêmes problème ^^"

      Voilà mon blog: http://sionevada.blogspot.com/

      Supprimer
  47. Bonjour :p
    J'ai un p'tit problème que j'ai essayé de régler en relisant plusieurs fois le tuto mais ma barre de menu n'est pas centré,elle reste complétement collée sur la gauche :c En vrai ça doit être tellement simple que j'me suis trompée quelque part :c
    Je te laisse mon blog pour que tu puisses voir par toi même ! http://ivyjooy.blogspot.fr/

    Merci d'avance :D

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

      Supprimer
  48. Bonjour et encore merci pour ces aides précieuses.
    Je viens tout juste de modifier et corriger mon menu. J'avais fait des erreurs et je n'avais pas eu le temps de le modifier. Et d'autres erreurs sont apparues après modification. En effet, mon menu déroulant est figé, des petits clefs et un cadre apparait. Je veux persévérer mais je dois dire là que j'ai perdu le fil. Milles Mercis encore pour ton aide.
    Cecile:
    http://latelierdelalibellule.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Cecile,
      On dirait que tu as réglé le problème ?

      Supprimer
  49. Bonjour,

    J'ai suivi vos tutos pour mettre en forme mon blog, mais je ne peux pas mettre les deux menus sur la même ligne, quand je colle la ligne de code qui doit normalement permettre de mettre les deux menus sur la même ligne, ça fait bugger mon menu déroulant ^^'. Les sous catégories se mettent n'importent où...

    Est-ce-que par hasard vous auriez une idée de comment je pourrais régler ce petit soucis ?

    (Ps: Super tutos, j'adore ils sont top !)

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

      Supprimer
  50. Hello ton blog est vraiment super ! Il m'a beaucoup aidé :)

    SAUF ! Que aujourd'hui gros problème, ma barre de navigation et mon menu ont totalement disparu !! Malgré le fait que les codes html/java soit toujours.

    Là je ne sais vraiment plus quoi faire :( H e l p !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Depuis 1-2 jours j'ai remarqué ce bug provenant de Blogger : quand on modifie un gadget il passe en mode non visible, ce qui fait disparaître le gadget.

      - Va dans Mise en Page et clique sur Modifier sur le gadget qui n'apparaît plus.
      - En haut de la fenêtre qui s'ouvre, clique dans la barre d'adresse.
      - Va à la fin de l'adresse URL dans cette barre d'adresse.
      - Tu trouveras un code comme ceci :

      widgetId=Image1

      Image1 est le nom de ton gadget. Pour un gadget HTML le nom peut être HTML1, etc.

      - Maintenant va dans Modèle > Modifier le code HTML.
      - Clique sur le bouton Accéder au widget à droite du bouton Enregistrer le modèle.
      - Sélectionne ton gadget (dans mon exemple Image1).
      - Tu trouveras une ligne semblable à celle-ci :

      <b:widget id='Image1' locked='false' mobile='yes' title='Entrer' type='Image' version='1' visible='true'>

      - Vérifie que tu as bien le code en gras : visible='true'
      Si tu as visible='false' à la place, alors remplace false par true.

      - Sauvegarde, et voilà ;)

      Supprimer
    2. Hey franchement merci ça m'a beaucoup aidé :)

      Maintenant second petit problème ma barre de navigation est scindée en deux :( j'essaye toujours de résoudre le problème

      Si tu veux voir l'étendu des dégâts c'est par ici : https://sionevada.blogspot.com/

      Supprimer
    3. Bonjour,
      Tout d'abord, il faut modifier la couleur de fond du contenant de ton menu pour s'accorder avec tes nouveau menus.

      Ajoute le code CSS suivant :

      #barre_nav {
      background: #5b1c4f;
      }

      Maintenant, tous tes liens sont de la même couleur que le fond. Modifie leur couleur dans ton code CSS suivant :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-size: 14px;
      font-style: normal;
      text-decoration: none;
      color: #34102D;
      margin-right: 30px;
      margin-left: 30px
      }

      Remplace #34102D par le code couleur de ton choix.

      Ensuite, pour aligner tes menus aux bords de ton blog, ajoute le code CSS suivant :

      #barre_nav div {
      max-width: 880px;
      margin: 0 auto;
      }

      Maintenant tes icônes des réseaux sociaux ont un espace trop grand entre eux, ce qui les décale sous le 1er menu. Pour régler cela, ajoute le code CSS suivant à la suite de tes codes CSS pour ton menu :

      .second-nav a {
      margin: 0 !important;
      padding: 0 6px !important;
      }

      Pour finir, il faut rectifier l'alignement de ton champ de recherche. Vas dans les paramètres de ton gadget de ton champ de recherche. Retrouve le code CSS commençant par :

      #barre_nav #search {

      Remplace la ligne :

      margin-left: 400px;

      Par :

      margin-left: 0;

      Sauvegarde et voilà ;)

      Supprimer
    4. Hello !

      M E R C I !! Vraiment merci d'avoir donné un peu de ton temps pour moi ça fait vraiment plaisir :) ça fonctionne a merveille :)

      Maintenant je vais tester les autres tutos de ton blog :)

      Supprimer
  51. Hello hello !

    Ton blog est génial, vraiment. Ça fait plusieurs jours que je fais une refonte totale de mon blog et ton blog a été d'une TRES grande aide. Le développement ne me parait plus être une machination informatique machiavélique grâce à toi. :P

    Cependant, je crois qu'il y a toujours un MAIS ... J'ai un petit soucis avec ma barre de navigation. J'étais parvenue à séparer mes deux menue, à les fixer en haut en scrollant et tout et tout. Bref, tes explications (et les réponses que tu as fait à d'autre) étant très claires, le résultat était là. Et ce soir, en voulant rajouter une nouvelle image dans la barre de navigation une flèche à côté des catégories "à dérouler"), mon menu à littéralement bugé... J'ai chercher à rectifié, puis et remis le menu comme il était avant. Sauf que du coup, même après avoir refait le tuto deux nouvelles fois, en effaçant puis en recommençant, mon deuxième menue s'affiche toujours en dessous. J'ai du faire une fausse manipulation ou taper quelque chose qui interfère avec mon menue.. Tu crois que tu arriverais à trouver le problème?
    Encore merci pour tous :D ! 7

    Mon blog : https://mathildesbooksandco.blogspot.fr/

    RépondreSupprimer
  52. Bonjour,
    Juste pour t'informer que j'ai réussi à résoudre le problème d'alignement de menu ! J'aurais bidouillé un moment mais j'ai réussi!
    Je te remercie encore pour tous ces merveilleux conseils, c'est génial ce que tu fais pour les blogueurs, vraiment ! :D

    RépondreSupprimer
  53. Bonjour,
    j'ai un petit soucis, je n'arrive pas à laisser une marge à droite de ma barre de navigation et j'aimerai rapprocher les icônes des réseaux sociaux, est-ce possible ?
    merci d'avance
    Coralie

    RépondreSupprimer
    Réponses
    1. Bonjour Coralie,
      Je vois bien une marge à droite de ton menu :)
      Pour diminuer l'espace entre tes icônes retrouve ton code CSS suivant :

      /* Liens du 2e menu
      ----------------------------------------------- */
      .second-nav a {
      margin-right: 0px !important;
      }

      Ajoute :

      margin-left: 10px !important;

      Avant le signe } comme ceci :

      /* Liens du 2e menu
      ----------------------------------------------- */
      .second-nav a {
      margin-right: 0px !important;
      margin-left: 10px !important; /* Espace à gauche des liens */
      }

      Modifie la valeur de 10px pour celle qui te plaît, et voilà ;)

      Supprimer
    2. Merci beaucoup Catherine ! C'est super ! Et merci aussi pour mon problème sur mon double menu déroulant, je n'ai pas retrouvé le commentaire pour te remercier au bon endroit alors je fais d'une pierre deux coups ici ! Merci encore ! Je pense revenir vers toi quand tu auras plus de temps (si tu veux bien encore mettre un deuxième coup de pinceau à mon blogounet ! j'ai vu sur ta page de contact que tu croulais sous la demande !) A bientôt !

      Supprimer
  54. Bonjour,
    J'adore vos tutoriels qui m'aide beaucoup et je tiens à vous en remercier.
    Cependant j'ai un petit problème:
    J'avais bien réussi à faire ma barre nav comme je le voulais sauf que je la voulais plus large (un peu comme la votre). Quelqu'un m'a alors recommandé de taper au début du code html font size="3" et là : malheur ! Mes menus se sont déroulés alors que j'avais déjà taper dans le modèle une manip' que vous aviez déjà conseiller à d'autres internauts en commentaire et qui avait très bien marché ! J'ai vérifié : il était toujours là. Alors je me suis penché sur le code Html que j'avais modifié voir si ça m'avait déréglé certains codes. J'arrive à me débrouiller en re-regardant vos tutos pour voir comment c'était au final et j'arrive donc à retrouver mes menus déroulant comme ils étaient auparavant, c'est-à-dire : normal.
    Sauf que ça m'a enlevé mes boutons de réseaux sociaux que j'avais mis à droite suite à votre tuto comment séparer votre barre de navigation. Et je n'arrive toujours pas à les retrouver ! J'ai beau vérifier plusieurs fois mon code Html, je ne vois pas ce qui ne va pas. J'espère de tout coeur que vous pourrez m'aider.

    Merci d'avance.

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

      Supprimer
  55. Bonjour !

    J'ai suivi ton tuto à la lettre il y a quelques mois, il est très bien expliqué en passant !

    Depuis quelques jours j'ai un souci avec mon menu. Quand je clic sur mes rubriques , les articles ne s'affiche plus, il y a un texte qui dit que la page est potentiellement indisponible à la place.
    Dans la partie concernée dans modifier le modèle, il y a quelques codes en rouge (j'ai regardé ton tuto pour voir si je n'avais pas omis de mettre un code en trop ou d'en enlever un, mais ça ne marche toujours pas. Cette notification s'affiche : "Erreur d'analyse XML, ligne 1360, colonne 5 : The element type "li" must be terminated by the matching end-tag ".

    Je ne peux pas enregistrer la modification du modèle et ça a rapprocher les deux menus, ils sont tout coller..

    Aurez-tu une petite aide à m'apporter ?

    Merci d'avance ! Bonne journée :)

    Anaëlle

    RépondreSupprimer
    Réponses
    1. Bonjour Anëlle,
      Dans le code HTML de ton menu, les adresses url de tes liens ont un problème. Au lieu de renvoyer vers un libellé, ils ont tous "/souscatégorie1" ou quelque chose du genre à la fin. Il faut que l'adresse url des liens vers tes libellés ressemblent à ceci :

      http://www.anaellecuisine.com/search/label/petitdejeuner

      Cette adresse doit terminer par le libellé en question, sans signe / ou autre chose derrière :)

      Supprimer
    2. Super ! Merci tout fonctionne maintenant ! :D

      Hâte que tu fasses de nouveaux tutos ;)

      Supprimer
  56. Bonjour Catherine

    Ton blog est une véritable merveille! Merci!

    J’ai recommencé à blogueur il y a peu et je me suis lancée dans la refonte de mon design grâce à toi.
    Mais j’ai un problème.
    Il y a une erreur dans mon code. Et à mon avis pas qu’une!

    1° J’ai crée un menu déroulant
    2° J’ai voulu le séparer en deux dans le gadget HTML pour mettre des boutons réseaux sociaux.
    J’ai eu des erreurs et pour ne pas faire pire, j’ai voulu revenir au menu déroulant basic.
    (Donc, plus besoin de séparer la bar de navigation en deux pour l’instant.)

    J’ai pourtant restaurer le template d’avant mais rien n’y fait.

    Et finalement c’est pire xD et je vais d’erreur en erreur.
    (J’aurais du continuer ma 1e année en webdesign… :’) )

    Je voudrais donc que mon menu déroulant soit
    -centrer
    -avec des bordures en haut et en bas de 1px en couleur #EBEAFF
    -Pas de bordures à droite ni à gauche de la barre et ni des liens
    -un espace entre les liens et la bordure au dessus et en dessous de 20 px pour aérer

    Ma question est où sont mes erreurs pour que je les comprenne et que ça ne m’arrive plus à l’avenir.

    J’espère que tu me répondras.

    Bien à toi
    Tiphaine - Beauté et Légèreté

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine,
      En rajoutant les <ul> et </ul> qu'il te manquait, comme expliqué dans une précédente réponse à un de tes commentaires, tu retrouveras tes bordures. Ensuite il te suffit d'apporter quelques modifications à tes codes CSS pour espacer tes liens.

      Retrouve ce code CSS :

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

      Ajoute la ligne suivante avant le signe } :

      padding: 0;

      Ensuite retrouve ce code CSS :

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

      Remplace la ligne :

      margin-right: 40px;

      Par :

      padding: 20px 20px 20px 20px; /* Espace au-dessus à droite sous et à gauche des liens */
      display: inline-block;

      Et voilà ;)

      Supprimer
    2. Bonjour Catherine,
      Comment mettre le premier lien (=Accueil sur mon blog) de la barre de navigation du menu 1 plus à droite?
      Comment mettre la dernière icône du menu 2 plus à gauche?
      Et comment diminuer l'espace entre les icônes du menu 2?

      Et enfin, est-il possible de mettre un background sur les liens de la barre de navigation (Accueil - soins - maquillage - lifestyle, etc...) comme le background des sous-catégories (aussi épais et avec le même espace autour du texte)? (je suis désolée si je t'ai déjà posé la question sous un autre article)
      En tout cas, merci pour tes réponses, c'est vraiment super!
      Tiphaine
      https://beaute-et-legerete.blogspot.be

      Supprimer
    3. Finalement, je pense avoir trouvé une astuce
      J'ai remplacé la largeur max pour le contenant du blog par 1100 alors que mon blog fait 1200
      Dans le code
      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 1100px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      }
      Ça m'a ramené mes deux menus un peu plus au centre.
      Je veux savoir si cette astuce est correcte ou si c'est une erreur et qu'il faut trouver un autre moyen

      Supprimer
    4. Bonjour Tiphaine,
      Pour supprimer l'espace à gauche de ton premier lien ajoute le code suivant :

      .first-nav li:first-child {
      padding-left: 0;
      }

      Avant la ligne :

      /* Columns

      Ensuite pour supprimer l'espace à droite de ton dernier lien du 2e menu ajoute le code CSS suivant :

      .second-nav li:last-child {
      padding-right: 0;
      }

      De même, colle ce code avant la ligne :

      /* Columns


      Pour diminuer l'espace entre les icônes, ajoute le code CSS suivant :

      /* Icônes du 2e menu */
      .second-nav li {
      padding-left: 6px !important;
      padding-right: 6px !important;
      }

      Modifie la valeur 6px par celle qui te convient et voilà ;)

      Supprimer
  57. Re Bonjour Catherine

    Ce serait peut-être plus simple pour moi que tu m'aides à revenir à un une barre de navigation non déroulante que l'on obtient après avoir suivi ton tuto "La barre de navigation - partie 2"

    En clair, je préfèrerais que tu m'indiques quelle partie de code je dois supprimer pour revenir à un menu
    Accueil Soins Maquillage Outfits Wishlists Humeurs Marques Contact
    sans qu'il y ait de sous-catégories comme dans un menu déroulant

    Je voudrais aussi "garder" une bordure de 1px en haut et en bas espacée de 20 px
    + la barre de navigation centrée.

    Quel code je dois supprimer?
    o% sont mes erreurs?

    Ensuite, je pourrai à nouveau suivre ton tuto "Créer un menu déroulant" et je repartirai sur de bonnes bases.

    Bien à toi
    et j'espère que tu pourras me consacrer un peu de ton temps.

    Tiphaine - Beauté et Légèreté

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

      Supprimer
    2. C'est beaute-et-legerete.blogspot.be

      Supprimer
  58. Coucou, je te remercie avant tout pour ton tuto.
    J'aurai une question par rapport au lien au tout début de l'article.
    Dans : "Créer son menu
    La barre de navigation partie 1 : Créer son menu en HTML
    La barre de navigation partie 2 : Modifier l'apparence du menu avec du CSS"
    Les parties 1 et 2 renvoient à une page neutre, est-ce normal ? merci d'avance pour ton aide :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Merci pour l'info ! Les liens on été mis à jour ;)

      Supprimer
  59. (RE) Bonjour Catherine !

    Ce tuto est génial ! Mais je ne comprends pas pourquoi je bloque à ce niveau : /* Définit une largeur maximale pour le contenant du menu */
    j'ai beau mettre la valeur de mon contenant, rien ne se passe :/
    Si tu pouvais m'éclairer à ce sujet ce serait top !!
    Un énorme merci !
    http://chillavecmoi.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Anne-Lyse,
      Je ne vois pas les codes HTML des 2 menus sur ton blog :/
      Sans les codes HTML, les codes CSS ne marcheront pas.

      Supprimer
  60. Bonjour Catherine !
    Comment puis-je faire pour avoir à nouveau un menu sous mon image de titre ?
    J'aimerais avoir mon premier menu en haut avec "about" "buy" "contact" et mes liens réseaux sociaux. Comme j'ai là séparer en deux.
    Et un deuxième menu sous mon titre avec mes catégories et des menus déroulants dans des menus déroulants.

    Merci pour tes précieux conseils !

    Bonne journée !

    www.m-art-rion.blogspot.ch

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Tout d'abord je te conseil de déplacer le code HTML de ton en-tête au-dessus de la ligne :

      <div class="tabs-outer">

      En soi ça ne devrait pas changer grand chose pour le moment car c'est le code HTML de ton menu actuel qui est fixé en haut de ton blog.
      Par contre en ajoutant de nouveaux gadget à cette partie, ils apparaîtront sous ton en-tête.

      Si tu souhaites conserver un menu fixé en haut du blog alors utilise le gadget de ton menu actuel pour ce menu.
      Il faudra créer un nouveau gadget HTML dans la même partie Tabs dans lequel tu ajouteras le menu que tu souhaites afficher sous ton en-tête.

      Les codes HTML et CSS seront les mêmes pour les 2 menus. Pour les différencier il faudra simplement remplacer le nom du 2e menu. Dans le code HTML du 2e menu, remplace barre_nav de la ligne :

      <div id="barre_nav">

      Par un autre nom, par exemple Nav_sous_header comme ceci :

      <div id="Nav_sous_header">

      Ensuite, pour cibler ce menu spécifiquement dans les codes CSS, il faudra remplacer :

      .tabs .widget

      Et

      #barre_nav

      Par le nom de ton 2e menu avec un # devant comme par exemple :

      #Nav_sous_header {
      }

      Supprimer
  61. Bonsoir, je voulais tout d'abord te remercier pour ton aide.
    Je rencontre un petit soucis, le menu 1 ne veut pas aller à gauche ni le menu 2 à droite.
    Pourrais-tu m'aider s'il te plait ?
    Et au passage, peux-tu m'aider à retirer les bordures roses des mes menus ?

    Merci d'avance. Garance
    Mon blog : https://garanceflower.blogspot.fr/

    Bonne soirée !

    RépondreSupprimer
    Réponses
    1. Bonjour Garance,
      Ton 2e menu est à l’intérieur du 1er c'est pour ça qu'ils restent collés.
      Pour le déplacer à l'extérieur du 1er menu il faut qu'il soit après le </ul> de fin du 1er menu. Pour cela retrouve cette partie du code HTML de ton menu :

      </ul>
      <!-- fin de la 2e partie du menu -->
      </ul>

      Supprime le dernier </ul> comme ceci :

      </ul>
      <!-- fin de la 2e partie du menu -->

      Maintenant retrouve cette ligne :

      <!-- début de la 2e partie du menu -->

      Colle </ul> avant cette ligne comme ceci :

      </ul>
      <!-- début de la 2e partie du menu -->

      Ensuite, il a quelques détails à modifier dans ton code CSS pour que les liens soient bien alignés à ton image d'en-tête.

      Retrouve ce code CSS :

      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 960px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      }

      Remplace-le par :

      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 1120px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      text-align: left;
      line-height: 0;
      }

      Rajoute ce code :

      #barre_nav ul {
      margin: 0 !important;
      line-height: 0 !important;
      }

      A la suite comme ceci :

      /* Définit une largeur maximale pour le contenant du menu */
      #barre_nav div {
      max-width: 1120px; /* Remplacer la valeur en pixels par la largeur de votre contenant */
      margin: 0 auto;
      text-align: left;
      line-height: 0;
      }

      #barre_nav ul {
      margin: 0 !important;
      line-height: 0 !important;
      }


      Pour supprimer la bordure rose de tes liens retrouve ce code CSS :

      .tabs-inner .widget li a {
      border: solid 2px #fae3e3;
      }

      Remplace-le par :

      .tabs-inner .widget li a {
      border: none !important;
      }

      Pour aligner tes liens parfaitement au bords de ton image d'en-tête, retrouve :

      .tabs-inner .widget li:first-child a {
      border-left: none;
      }

      Rajoute le code ci-dessous avant le signe }

      padding-left: 0;

      Comme ceci :

      .tabs-inner .widget li:first-child a {
      border-left: none;
      padding-left: 0;
      }

      Rajoute le code CSS suivant à la suite :

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

      Supprimer
  62. Coucou !

    J'ai un problème avec ma sous catégorie "lifestyle" où dedans il doit y avoir "voyages - shopping - lookbook - divers" or tout est mis en dessous et je n'arrive pas du tout à y remédier :'(

    Je poste ici car il n'est plus possible de publier sous l'autre article

    Bonne journée

    RépondreSupprimer
  63. Voici mon blog : https://mybedismybestfriend.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Gweny,
      Je ne vois pas ton menu déroulant :/

      Supprimer
  64. Bonjour Catherine,
    Je n'arrive pas à aligner mes deux menus, ils restent l'un sous l'autre.... Je ne comprends pas l'erreur que j'ai faite.
    Deuxièmement je comptais fixer la barre en haut de mon blog grâce à ton deuxième tuto, mais comment faire pour que ce soit esthétique sur la version mobile? Car j'avais essayé la dernière fois, et ce n'était vraiment pas jolie cette barre en haut, sur mon téléphone.
    Merci beaucoup Catherine!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que tu as réussi à régler le problème de tes menus ;)
      Pour ton menu sur mobile (je suppose que c'est le menu déroulant sous ton en-tête), tu peux ajouter ces codes CSS pour qu'il soit fixé en haut du blog et prenne 100% de la largeur du blog sur mobile :

      .mobile #Label1 {
      position: fixed;
      top: 0;
      left: 0;
      padding: 0;
      width: 100%;
      z-index: 99999;
      }

      .mobile #Label1 h2 {
      display: none;
      }

      Ajoute ces codes CSS avant la ligne suivante de ton thème :

      ]]></b:skin>

      Ensuite, tu peux cacher ce menu sur la version web de ton blog en utilisant ce tutoriel. Pour info, le nom de ce gadget est #Label1 ;)

      Supprimer
  65. Bonjour ! Un grand merci pour ce tutoriel, comme d'habitude :)

    J'ai juste quelques petits problèmes :

    1/ Je n'arrive pas à changer le fond des icones de la deuxième barre de navigation (que je souhaite blanc) et à réduire la taille de ces icônes.. J'ai pourtant suivi à la lettre le tuto mais quand je veux changer le fond ça me change uniquement le fond de chaque icone et non le fond entier de la deuxième barre de navigation..

    2/ Impossible de mettre les icones de la deuxième barre sur la droite comme dans la tutoriel, j'ai pourtant entré le code ..

    J'espère avoir été claire :/

    Merci d'avance !!

    Mon blog : www.lenvieenrose.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Sara,
      Tout d'abord retrouve ce code CSS :

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

      Remplace 10px par 0.
      Ensuite, retrouve ce codes CSS :

      /* Aligner les 2 menus sur une même lige */
      #barre_nav ul {
      display: inline-block;
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Ajoute la ligne suivante avant le signe }

      padding: 10px 0;

      Ensuite, retrouve ce code :

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

      Remplace inline par inline-block.
      Maintenant retrouve ce code :

      /* Alignement du 2e menu à droite */
      #barre_nav .second-nav {
      float: right;
      }

      Et rajoute les codes suivants avant la ligne }

      height: 62px;
      background: #fff;
      padding: 0 6px;

      Retrouve maintenant ce code :

      /* Apparence des icônes Font Awesome du 2e menu */
      .second-nav .fa {
      color: #FEFEFE;
      font-size: 16px;
      margin-right: 1px;
      }

      Diminue la valeur de 16px pour diminuer la taille des icônes. Remplace #FEFEFE par la couleur des icônes que tu souhaites utiliser.
      Pour finir, colle le code CSS suivant :

      #barre_nav .second-nav a {
      top: 20px;
      position: relative;
      height: auto !important;
      font-size: initial;
      padding: 10px 10px;
      margin: 0;
      }

      Avant la ligne :

      /* Columns

      Et voilà ;)

      Supprimer
    2. S U P E R ! Mille mercis encore une fois, tout à fonctionné :)

      Supprimer
  66. Bonsoir,

    Encore un grand merci pour ce tuto qui est toujours aussi bien fait.
    J'ai réussi la plupart des étapes mais une seule chose bloque encore, je n'arrives pas à aligner les deux menus sur la même ligne. Et pourtant j'ai vérifié le code plusieurs fois et je ne vois pas d'erreur. Pourrais-tu m'aider svp ?

    https://la-lutine-tricotine.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Morgane,
      Je vois que tu as résolu le problème, tes menus sont bien alignés sur la même ligne ;)

      Supprimer
  67. Bonjour Catherine,

    J'essaye d'intégrer ton code "aligner les 2 menus sur une même ligne" mais directement il m'affiche une erreur 404.. Peux-tu m'aider stp?

    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est peut-être un problème de Blogger. As-tu réessayé depuis ?

      Supprimer
  68. Hello Catherine :D
    Voilà 3 jours que je suis sur ma barre de navigation xD 3LONG JOURS ! j'ai suivit tes différents tuto et j'ai réussi a placer tout ce que je voulais placer ^^
    Sauf que bien sûr, il y a toujours des petits bug. Comme tu pourras le voir ( http://dltdl8.blogspot.fr/ )
    * La couleur de la barre de navigation ne fait pas toute la barre ...
    * Il y a cette bordure bleu/blanche que je n'arrive pas a enlever ...
    * L'icone Facebook est bizarrement éloigné des deux autres ...
    * Les icônes ne changent pas de couleurs quand je vais dessus avec ma sourie
    * Et pour finir, depuis que j'ai déplacer mon menu en haut du blog, les titres des gadjets sont réaparut sur le coté de mon blog, je ne sais pas pourquoi ...

    Fiouu cela fait beaucoup de chose je sais ... je me désespère aussi xD

    Encore merci du temps que tu nous accordes
    bonne journée :D

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour le fond de ton menu et la bordure, retrouve ce code :

      /* Apparence globale du menu */
      #barre_nav {
      border-top: 1px solid #dddddd;
      border-left: 1px solid #dddddd;
      border-right: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      }

      Les paramètres définis ci-dessus ajoutent une bordure tout autour du menu. Il faut les supprimer et les remplacer par une couleur de fond comme ceci :

      /* Apparence globale du menu */
      #barre_nav {
      background: #656565;
      }

      Pour tes icônes sociaux, ton lien Facbeook est bien dans une puce de la liste (entouré de <li> et </li>) mais tes icônes pour Instagram et Youtube ne le sont pas. Tu peux ajouter <li> et </li> autour de tes liens Instagram et Youtube, ou supprimer les <li> et </li> autour du lien Facebook.

      Pour la couleur des icônes au survol, cela vient de 2 erreurs dans ton code CSS. Ces 2 codes ne sont pas fermés :

      /* Apparence des icônes Font Awesome du 2e menu */
      .second-nav .fa {font-size: 20px;
      color: #FFFFFF;margin-right: 20px;
      /* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
      .second-nav .fa:hover {color: #C28680;

      Il manque les signes } à la fin. Rajoute-les comme ceci :

      /* Apparence des icônes Font Awesome du 2e menu */
      .second-nav .fa {
      font-size: 20px;
      color: #FFFFFF;margin-right: 20px;
      }

      /* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
      .second-nav .fa:hover {
      color: #C28680;
      }

      Un oubli de signe ou un signe en trop et tout ce qui suit l'erreur n'est pas, ou mal, pris en compte. Cela peut expliquer pourquoi tes titres sont réapparus ;)

      Supprimer
  69. Bonjour Catherine,

    Merci beaucoup pour tes tutos qui me sont très précieux! Cependant, étant très novice en la matière, j'ai quelques soucis avec ma barre de navigation... J'ai bien réussi à la diviser en deux & à tout mettre sur la même ligne. Par contre je n'arrive pas à tout centrer, et il y a un petit espace au milieu. J'avais aussi un menu déroulant qui, depuis la manip, reste ouvert... Je n'arrive pas à résoudre le problème, peux-tu m'aider?

    Merci d'avance!

    Elodie

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      As-tu réglé le problème des menus déroulants ? Car cela semble fonctionner.
      Pour ce qui est de l'espace, parle-tu de l'espace entre les liens et les icônes des réseaux sociaux ? Si oui, alors c'est normal qu'il y ait cet espace, c'est dû à la séparation des 2 menus ;)

      Supprimer
    2. Bonjour Catherine,
      Oui effectivement j'ai réussi à bidouiller un truc avec tes réponses aux commentaires précédents. :)
      Par contre j'ai des petits pointillés qui apparaissent en haut de ma barre, je ne sais pas d'où ils viennent ni comment les enlever... J'aimerais aussi que ma barre soit plus large car là elle s'arrête juste sous mes titres et ça ne fait pas joli. Et une dernière petite chose, je voudrais qu'au survole de ma barre de droite, mes icônes changent de couleur au lieu d'être soulignés d'un trait rouge comme sur ma barre de gauche. J'ai essayé mais je n'y arrive pas...
      Peux-tu m'éclairer sur les démarches à suivre? :)

      Supprimer
    3. Bonjour Elodie,

      Pour la bordure au-dessus de tes liens, retrouve ce code CSS :

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

      Ajoute :

      border: none !important;

      Avant le signe } comme ceci :

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

      Pour ce qui est de l'espace autour des liens de ton menu (au-dessus et en-dessous) tu peux la modifier en retrouvant ce code :

      .tabs .widget ul {
      padding-top: 20px !important;
      display: block;
      }

      La ligne suivante définit un espace de 20px au-dessus du menu :

      padding-top: 20px !important;

      Tu peux réduire cet espace si tu le souhaites en diminuant la valeur de 20px.
      Ensuite rajoute la ligne suivante :

      padding-bottom: 20px !important;

      Qui va définir l'espace sous le menu. Tu peux mettre la même valeur que celle du haut pour équilibrer.

      Tu peux changer l'apparence des liens du 2e menu avec les codes CSS suivants à coller avant la ligne /* Columns :

      /* Apparence des liens du 2e menu */
      .second-nav a {
      }

      /* Apparence des liens du 2e menu quand survolés par la souris */
      .second-nav a:hover {
      }

      /* Apparence des icônes Font Awesome du 2e menu */
      .second-nav .fa {
      }

      /* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
      .second-nav .fa:hover {
      }

      /* Apparence des images 2e menu */
      .second-nav img {
      }

      Il faudra tout d'abord supprimer la bordure de ces liens au survol avec la ligne :

      border: none;

      A ajouter au code :

      /* Apparence des liens du 2e menu quand survolés par la souris */
      .second-nav a:hover {
      }

      Comme ceci :

      /* Apparence des liens du 2e menu quand survolés par la souris */
      .second-nav a:hover {
      border: none;
      }

      Ensuite tu peux spécifier dans ce même code la couleur de ton choix, par exemple :

      /* Apparence des liens du 2e menu quand survolés par la souris */
      .second-nav a:hover {
      border: none;
      color: #FE5F5F;
      }

      Et voilà ;)

      Supprimer
  70. Merci pour ce tuto qui ma beaucoup aidé mais j'ai eu un peutit problème j'ai beau ajouté ton code mon 2ème menue reste sur une ligne en-dessous, j'ai réussi à les séparé tout c'est bien passer mais arriver à cette étape je bloque.
    J'ai essayé de mettre le code avant le code pour en mettre un a gauche un a droite, le mettre après mais mon 2ème menue reste sur la ligne du dessous

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

      Supprimer
    2. oui le voila: http://unefilleatypiquee.blogspot.fr/

      Supprimer
    3. Bonjour Juliette,
      Il y a quelques erreurs dans le code HTML de ton menu.
      Tout d'abord il faut nommer ton premier menu (la première liste de lien) first-nav pour lui associer les codes CSS. Retrouve le code HTML de ton menu et ajoute :

      class="first-nav"

      Au premier code <ul> comme ceci :

      <!-- début du menu -->
      <div id="barre_nav">
      <div>
      <ul class="first-nav">

      Ensuite il faut placer ton 2e menu dans le même contenant que ton premier menu, or actuellement il est à l'extérieur de ce contenant. Déplace le code HTML de ton 2e menu à partir de :

      <!-- début de la 2e partie du menu -->

      Jusqu'à :

      <!-- fin de la 2e partie du menu -->

      Avant le </div> qui ferme le menu, en gras ci-dessous :

      <div>
      <ul class="first-nav">
      <li><a title="Accueil" href="http://unefilleatypiquee.blogspot.fr/">A C C U E I L</a></li>
      </ul>
      </div>

      Supprimer
    4. Merci beaucoup j'ai réussis!

      Supprimer
  71. Un grand merci pour tous ces conseils !!! Grâce à vous je vais réussir à faire un blog à mon goût :).

    www.mamandejumeaux.fr

    RépondreSupprimer
  72. Hey ! Un énorme merci pour tout ces tutoriels ! Je viens de finaliser celui ci, cependant la barre déroulante du menu reste figée d'un seul coup ... As-tu une solution ? :)

    Merciiiii

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter ces codes CSS :

      #barre_nav ul ul {
      display: none !important;
      }

      #barre_nav ul li:hover ul {
      display: block !important;
      }

      Avant la ligne :

      /* Columns

      Supprimer
  73. Merci beaucoup pour tes réponses & tes tutos, j'arrive à faire des choses que je n'avais même pas imaginé pouvoir faire grâce à toi! ;)

    RépondreSupprimer
  74. Bonjour Catherine !

    Ce commentaire n'est peut être pas sous le bon article mais l'article en question avait trop de commentaires. Je voudrait changer l'apparence de mon blog sur mobile. Le rendu n'est vraiment pas top que ce soit au niveau de la présentation des articles mais surtout au niveau de ma barre de navigation qui mange ma bannière. J'aimerais bien pouvoir faire un menu déroulant avec un burger. Du coup est ce que c'est quelque chose de compliqué à faire ? J'ai cherché des Tuto mais je n'en ai pas trouvé, en as tu à me conseiller ? Je préfère faire ça moi même parce que c'est quelque chose qui me plait mais si d'aventure c'est quelque chose de trop compliqué je pourrais venir vers toi pour un devis ?

    Merci d'avance et belle journée !
    bordelutopique.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Romane,
      Pour modifier l'apparence de ta version mobile, tu peux utiliser les codes CSS en ajoutant .mobile devant. .mobile va cibler les éléments de la version mobile.
      Par contre, pour modifier la mise en page des éléments sur mobile il faut modifier le code HTML de ton thème.
      Pour que ton menu apparaisse correctement sur mobile tu peux essayer d'utiliser Slicknav (en anglais). Sinon, je peux le faire pour toi mais j'ai de l'attente. Si tu es intéressée, envoie-moi un mail avec le formulaire de contact ;)

      Supprimer
  75. Bonjour Catherine,

    J'ai bien effectué les étapes une par une et tout est bien. La seule chose c'est que lorsque je fais défiler le texte vers le haut, le milieu du texte ne disparait pas sous la barre de navigation. La barre de navigation n'est pas uniforme avec le menu de droite et celui de gauche et aussi les deux menus de sont pas joint l'un avec l'autre.

    Voici l'adresse de mon site : http://proclamelaparole.blogspot.ca/

    Merci d'avance pour ta généreuse aide.

    Benoit

    RépondreSupprimer

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

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

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