banner 5
<div class="topBar">
<div class="bannerContainer">
<div class="contact">
<p class="phone">03 0000 0000</p>
<p class="mobile">0400 000 000</p>
<a class="email" href="mailto:">email@email.com.au</a>
<p class="address">123 Street Name, Australia 3000</p>
</div>
<div class="socialLinks">
<a href="#" class="facebook"></a>
<a href="#" class="instagram"></a>
<a href="#" class="twitter"></a>
<a href="#" class="googlePlus"></a>
<a href="#" class="pinterest"></a>
<a href="#" class="linkedIn"></a>
<a href="#" class="youTube"></a>
</div>
</div>
</div>
<div class="bannerContainer">
<div id="logo">
<img src="websiteLogo.png" />
</div>
</div>
#banner .container{
padding:0px;
max-width:none !important;
width:100% !important;
}
#logo{
width:80%;
max-width:200px;
max-height:80px;
padding:30px 0px;
}
#logo > img {
width:100%;
height:auto;
}
.contact {
font-size:1em;
color:inherit;
}
.contact p, .contact a{
display:block;
color:inherit;
text-decoration:none;
line-height:1.2em;
margin-right:10px;
}
.bannerContainer{
width:100%;
max-width:1100px;
margin:auto;
}
.topBar{
background:rgba(0,0,0,.5);
color:#fff;
}
.topBar .bannerContainer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.topBar .bannerContainer p, .topBar .bannerContainer a{
display:inline-block;
font-size:.9em;
}
/* ---------------------------------- */
/* ---------- SOCIAL LINKS ---------- */
/* ---------------------------------- */
.socialLinks {
position: relative;
display:block;
margin-left:0px;
}
.socialLinks span {
font-size: .9em;
font-weight: 700;
margin-right: 20px;
}
.socialLinks a {
color:#fff;
position: relative;
text-decoration: none;
vertical-align: top;
margin: 0px;
}
.socialLinks a:after {
font-family: FontAwesome;
width: 23px;
height: 23px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
padding:1px 0px 0px;
}