social icons

i have put this div on top of
<div id=”page” class=”hfeed site”>

”
<div class=”top-bar”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6″>
<ul id=”top-header-menu” class=”top-nav clearfix”>

• Home
• About
• Fashion
• Style
• Beauty

</div>

<div class=”col-md-6 header-social”>
<div id=”social” class=”social”>

• <i class=”social_icon fa fa-facebook”></i>
• <i class=”social_icon fa fa-twitter”></i>
• <i class=”social_icon fa fa-instagram”></i>

</div>
</div>
</div>
</div>
</div>

” and used this custom css

“.top-bar ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
#top-header-menu li {
color: red;
display: inline;
padding: 10px;
}

.top-bar {
line-height: 40px;
}
.top-bar a {
color: black;
}

.top-bar #social {
display: inline;
text-align: right;
}
”

how can i make the top bar tranparent from the header?