The PHP and CSS for the Genesis utility header

genesis_utility_header.css

/* ## Utility Header
--------------------------------------------- */

.utility_header {
        background-color: #00457c;
	width: 100%;
}

.utility_header_wrap {
	max-width: 1200px;
	padding-left: 5%;
	padding-right: 5%;
	margin: 0 auto;
	padding: 5px 0;
	text-align: right;
}

.social_icons li {
	display: inline-block;
	padding-left: 5px;
}

.social_icons li a {
	color: #ffffff;
}

.utility_header .social_icons li a:hover {
	color: #f68026;
}

@media only screen and (max-width: 1200px) {
.utility_header_wrap {
	max-width: 960px;
	padding-left: 5%;
	padding-right: 5%;
	}

}

@media only screen and (max-width: 960px) {
.utility_header_wrap {
    max-width: 800px;
	}
}

@media only screen and (max-width: 320px) {
.utility_header {
	text-align: center;
	}
}

genesis_utility_header.php

//* Add a utility header above main header
add_action ('genesis_before_header', 'd4tw_utility_header');

function d4tw_utility_header () {
echo '
<div class = "utility_header">
<div class = "utility_header_wrap">
<ul class = "social_icons">
<li><a href="#" target = "_blank"><em class="fa fa-envelope"></em></a></li>
<li><a href="#" target = "_blank"><em class="fa fa-facebook"></em></a></li>
<li><a href="#" target = "_blank"><em class="fa fa-twitter"></em></a></li>
<li><a href="#" target = "_blank"><em class="fa fa-instagram"></em></a></li>	
</ul>
</div>
</div>';
}