WordPress : Ajuster le menu de navigation pour s’adapter à un bouton supplémentaire

Publié par Jean-Michel le

J’ai besoin d’aide pour ajouter un bouton de navigation supplémentaire à la barre de navigation principale de mon site. Ceci est un thème Woo WordPress si cela aide. J’ai essayé de changer le rembourrage en css en vain. Lorsque j’ajoute mon nouveau bouton de navigation intitulé « Partenaires », le dernier élément de menu descend sur une deuxième ligne, ce qui n’est pas le meilleur.

Ceci est mon URL: http://kumbayah.com.au/

Ceci est mon nav css:

/* 2.2 Navigation */
#navigation{font:14px/14px sans-serif;border-top:10px solid #dbdbdb; border-bottom:5px solid #dbdbdb;padding:15px 0; margin-bottom:30px;}

#navigation ul.rss{background:url(images/ico-rss.png) no-repeat right 5px;padding:1px 6px 3px 0;margin-right:10px;}
#navigation ul.rss li{display:inline;padding:0 10px 0 0;}
#navigation ul.rss li a{color:#c63f00;text-decoration:none;}
#navigation ul.rss li a:hover{text-decoration:underline;}

.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; margin-left:10px; }
.nav a  { position:relative; color:#555; display:block; z-index:100; padding:5px 10px; line-height:18px; text-decoration:none; }
.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#eee; }
.nav li li.current_page_item { background:none; }
.nav li  { float:left; width: auto; }
.nav li a.sf-with-ul { padding-right:20px; }
.nav li ul li a  { text-shadow:0 1px 0 #fff; }
.nav li ul li a { border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.nav a, .nav li.current_page_item, .nav li.current_page_parent, .nav li.current-menu-ancestor, .nav li.current-menu-item, .nav li.sfHover, .nav li.selected { border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

/* 2.2.1 Drop-down menus */
.nav li ul  { background: #FFF; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; }
.nav li ul li  { background:#eee; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb;}
.nav li ul li a  { width:160px; color:#555; font-size:0.8em; line-height:18px; }
.nav li ul li a.sf-with-ul { padding:5px 10px; }
.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul { background:#eaeaea;}
.nav li ul ul  { margin: -30px 0 0 180px; }
.nav li ul ul li a  {  }
.nav li ul li ul li a  {  }

.nav li:hover,.nav li.hover  { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; }

.nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:40%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* 2.2.2 Top Navigation (optional) */
#top { background: #000; }
#top .nav { margin:0; }
#top .nav a { color:#ddd; padding:8px 10px; line-height:18px; text-decoration:none; text-shadow:none; }
#top .nav li  {  }
#top .nav li a.sf-with-ul { padding-right:20px; }
#top .nav .sf-sub-indicator { top:40%; }

#top .nav a:hover,
#top .nav li.current_page_item a,
#top .nav li.current_page_parent a,
#top .nav li.current-menu-ancestor a,
#top .nav li.current-cat a,
#top .nav li.current-menu-item a,
#top .nav li.sfHover a { background: #222; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}

#top .nav li ul  { background: #222; margin:0; padding:0px; width: 180px; border: none; z-index:999;
    /* Box Shadow */
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
#top .nav li ul, #top .nav li ul li:last-child a {
    /* Border Radius */
    border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
}
#top .nav li ul li { background:none; border:none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
#top .nav li ul li a  { padding:8px 10px; width:160px; color:#ddd; background: none; font-size:0.9em;}
#top .nav li ul li a:hover  { background: #000; }
#top .nav li ul li a.sf-with-ul { padding-right:10px; }
#top .nav li ul ul  { margin: -34px 0 0 180px; }

#top .nav li:hover, #top .nav li.hover  { position:static; }
#top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
#top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
#top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
#top .nav li:hover ul, #top .nav li.sfhover ul,
#top .nav li li:hover ul, #top .nav li li.sfhover ul,
#top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
#top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul  { left:auto; }

Toute aide serait merveilleuse.

Lire également:  Wordpress : Comment empêcher quelqu'un d'ouvrir mon répertoire de thèmes

Merci

Solution n°1 trouvée

Votre problème est avec cette ligne:

.nav li  { float:left; width: auto; }

La largeur automatique fonctionne généralement assez bien, mais dans les zones restreintes, cela peut poser problème, comme vous l’avez remarqué. La solution simple consiste à définir la largeur pour s’adapter à chaque liélément en fonction de sa largeur réelle ou simplement définir la largeur à 11 % comme suit :

.nav li  { float:left; width: 11%; }

J’ai testé 11% sur votre site et cela fonctionne et me semble bien. Je suggérerais de l’optimiser pour que chaque élément ait sa propre largeur en fonction de sa largeur réelle.

Lire également:  Wordpress : Meilleur emplacement pour les fichiers de traduction de thème

Bonne chance!

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *