Webpage header changing from solid black to transparent (screenshots included)

Hi there, having an issue where my header which should be all black, is changing to transparent when i log out of the admin panel.

I included screenshots of the issue, is clear to see the page backround in the second image, instead of solid black. Transparent header is disabled in Enfold options.

Would this possibly be caused by the CSS I added to make the social icons and phone number bigger? I was told by moderators to add the following:
@media only screen and (min-width: 767px) {
.phone-info {
position: relative;
top: 20px;
font-size: 24px;
}
#top #header .social_bookmarks li a {
font-size: 30px;
line-height: 80px;
min-height: 80px;
width: 80px;
}}

Thanks in advance.