Icônes sociales flottantes sur le panneau supérieur de Wordpress

Question

J'essaye de faire flotter deux icônes sociales de css facebook et linkedin sur le panneau supérieur à la droite d'un site Web de wordpress tout en rendant les icônes sensibles. J'ai placé les deux icônes dans un conteneur mais cela ne semble pas contrôler les icônes ou même travailler. La moitié du site se cache derrière la barre de menu sur la ligne bleue en haut de la page. Vous pouvez trouver le site avec les icônes en haut à droite du site.

http://www.rodgersgroupllc.com/newsite/

Voici le code HTML:

/* Social Icons */ 
 
#socialiconwrapper{ 
 
    width:100px; 
 
    height:100px; 
 
    float:right; 
 
} 
 
.social{ 
 
    float:right; 
 
} 
 

 
html { 
 
    font-size: 10px; 
 
} 
 
body { 
 
    text-align: right; 
 
} 
 
/* Wrapper */ 
 
.icon-button { 
 
    background-color: white; 
 
    border-radius: 7.6rem; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 2.0rem; 
 
    height: 3.6rem; 
 
    line-height: 3.6rem; 
 
    margin: 0 5px; 
 
    position: relative; 
 
    text-align: center; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 3.6rem; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 30px; 
 
} 
 
/* Circle */ 
 
.icon-button div { 
 
    border-radius: 0; 
 
    display: block; 
 
    height: 0; 
 
    left: 50%; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 0; 
 

 
} 
 
.icon-button:hover div { 
 
    width: 3.6rem; 
 
    height: 3.6rem; 
 
    border-radius: 3.6rem; 
 
    margin: -1.8rem; 
 
} 
 
.twitter div { 
 
    background-color: #4099ff; 
 
} 
 
.facebook div { 
 
    background-color: #3B5998; 
 
} 
 
/* Icons */ 
 
.icon-button i { 
 
    background: none; 
 
    color: white; 
 
    height: 3.6rem; 
 
    left: 0; 
 
    line-height: 3.6rem; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 3.6rem; 
 
    z-index: 10; 
 
} 
 
.icon-button .icon-twitter { 
 
    color: #4099ff; 
 
} 
 
.icon-button .icon-facebook { 
 
    color: #3B5998; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
} 
 
.icon-button:hover .icon-twitter, 
 
.icon-button:hover .icon-facebook,

<div id='socialiconwrapper'> 
 
    <div class ='social'> 
 
     <a href="https://twitter.com/minimalmonkey" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a> 
 
    </div> 
 

 
    <div class ='social'> 
 
     <a href="https://facebook.com" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a> 
 
    </div> 
 
</div>

Quelqu'un peut-il s'il vous plaît me dire pourquoi ces deux icônes sont au-dessus de l'autre et pourquoi ce n » t travail s'il vous plaît?

Answer 1

Il est à cause de potion absolue de .icon-button i

Essayez cette

#socialiconwrapper { 
    float: right; 
    height: auto; 
    margin: 1px 0 0; 
    width: auto; 
} 
#socialiconwrapper .social { 
    float: right; 
    margin-left: 12px; 
    text-align: center; 
} 
#socialiconwrapper .invert a { 
    background-color: #fff; 
    color: #f3ad45; 
    float: left; 
    height: 30px; 
    text-align: center; 
    width: 30px; 
} 
#socialiconwrapper i { 
    display: inline-block; 
    float: none; 
    font-size: 18px; 
    height: auto; 
    padding: 0; 
    position: relative; 
    top: -2px; 
    width: auto; 
} 

Answer 2

Essayez cela, le rembourrage et enlever la marge supérieure de #socialiconwrapper.

#socialiconwrapper { 
    width: 100px; 
    height: 100px; 
    padding: 0px; 
    z-index: 999; 
    margin-top: 0px; 
} 

.social { 
    float: right; 
    height: 36px; 
    width: 36px; 
}