WordPress : La zone cliquable du menu de navigation s’étend bien au-delà du bouton de navigation

Publié par Jean-Michel le

Pour une raison quelconque, les icônes de médias sociaux en haut de la barre latérale gauche sur www.hungryrunnergirl.com empêchent le clic sur le widget d’archive directement en dessous. Je n’ai pas ce problème lorsque je rends la position de chaque bouton absolue (le conteneur restant relatif), mais lorsque je le fais, les boutons apparaissent à différents endroits en fonction du navigateur à partir duquel vous visualisez. Quelqu’un a-t-il une idée de la raison pour laquelle cela pourrait se produire (soit le positionnement incohérent lors de l’utilisation de l’absolu, soit les zones non cliquables lors de l’utilisation du positionnement CSS relatif) ?

Voici le code que j’utilise actuellement pour styliser le menu :

/* Menu Container */
.custom .sidebar .menu {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  width: 190px;
  height: 190px;
  position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
    display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: 0px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px 0px;
}
.custom #menu-item-15470 a:hover {
    background-position:0px 0;
}
/* Pinterest */
.custom #menu-item-15471 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
position: relative;
left: 81px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -82px;
}
.custom #menu-item-15471 a:hover {
    background-position:0px -82px;
}
/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-top:10px;
position: relative;
left: 0px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -165px;
}
.custom #menu-item-15472 a:hover {
background-position:0px -165px;
}
/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
margin-top:10px;
position: relative;
left: 81px;
top: -172px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -248px;
}
.custom #menu-item-15475 a:hover {
background-position:0px -248px;
}

Je vous remercie beaucoup pour votre aide.

Solution n°1 trouvée

Ajoutez ce qui suit à li.widget(ligne 191):

position: relative;
z-index: 100;
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 *