Transparent logo and header - html

Question

I'm trying to buld header that is white, but on place where logo is transparent i want header to be transparent to so you can see trough logo. Is there any way to make one part of header transparent but all others white? As you can see logo is inside the header its 50x50px and i want that part to be all transparent
header {
width: 100%;
height: 165px;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid black;
background-color: white;
}
.content {
width: 960px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul li {
display: inline;
list-style: none;
}
nav ul li a {
text-decoration: none;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="NKO law firm company logo">
<nav class="main-navigation">
<ul>
<li>THE FIRM
</li>
<li>TEAM
</li>
<li>PRACTICE AREA
</li>
<li>RANKINGS
</li>
<li>CLIENTS
</li>
<li>CONTACTS
</li>
</ul>
</nav>
</div>
</header>

Answer 1

I came up with a bit of a "hacky" solution, using pseudo elements, that allows you to scale the size.
What's happening is that we're not setting a background colour directly on any of the elements. Instead, we are "faking" it by doing three things:
Adding border-bottom to the image, giving it a height equal to the
height of the header less the height of the image, and setting its
colour to white.
Adding a :before pseudo-element to the header, positioning it
top & left, with a background colour of white and a height equal to
that of the header. Using calc to set its width allows it to
scale to the left edge of the image and, effectively, hides it when
the window width is 960px or less as the result of the calculation
will be zero or a negative value.
Adding a :after pseudo-element to the header, positioning it top
& right, with a background colour of white and a height equal to
that of the header. The really "hacky" bit is setting the width
here. Using calc to subtract the widths of the :before element
and image works, provided the window width is greater than 960px -
less than that and the negative value of the :before width causes
the :after to encroach on the image. So we use 2 media queries to
set the width, the first as just explained for when the window width
is greater than 960px and the second for when the window width is
960px or less, which simply use calc to subtract the width of the
image from the overall width of the header.
body{
background:#ddd;
font-family:arial;
margin:0;
}
header{
border-bottom:1px solid #000;
height:165px;
width:100%;
left:0;
position:fixed;
top:0;
z-index:2;
}
header:before{
background:#fff;
content:"";
display:block;
left:0;
height:165px;
position:absolute;
top:0;
width:calc((100% - 960px) / 2);
z-index:1;
}
header:after{
background:#fff;
content:"";
display:block;
height:165px;
position:absolute;
right:0;
top:0;
z-index:1;
}
#media all and (min-width:961px){
header:after{
width:calc(100% - ((100% - 960px) / 2) - 50px);
}
}
#media all and (max-width:960px){
header:after{
left:50px;
}
}
.content{
width:960px;
margin:0 auto;
position:relative;
z-index:2;
}
img{
border-bottom:115px solid #fff;
height:50px;
width:50px;
}
nav{
float:right;
}
nav ul li{
display:inline;
list-style:none;
}
nav ul li a{
text-decoration:none;
}
main{
padding:176px 10px 10px;
}
main p{
margin:0 0 10px;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="">
<nav class="main-navigation">
<ul>
<li>THE FIRM</li>
<li>TEAM</li>
<li>PRACTICE AREA</li>
<li>RANKINGS</li>
<li>CLIENTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus condimentum nulla. Maecenas rutrum non mauris nec finibus. Sed dictum rhoncus turpis quis suscipit. Aliquam quam tortor, aliquam et tristique vitae, tempus in est. Donec non eros ac enim fringilla pulvinar. Praesent aliquam velit vel lectus tincidunt mattis. Maecenas id vulputate est. Ut consequat placerat enim vel lacinia. Aenean nec mattis metus, id tempus diam. Nunc viverra est et nunc tincidunt, at ullamcorper magna blandit. Maecenas egestas lectus nunc, ac cursus erat ullamcorper nec. Curabitur ut imperdiet libero.</p>
<p>Donec lorem nisi, ullamcorper in ex eu, consequat tristique lorem. Pellentesque feugiat ultrices vestibulum. Integer aliquet sodales suscipit. Integer posuere non orci id commodo. Phasellus elementum velit purus, nec efficitur diam semper ut. Vivamus at lobortis velit. Aenean egestas vestibulum ante, nec laoreet lorem vestibulum non. Donec a velit augue. Donec varius vehicula volutpat. Proin quam arcu, sodales lobortis risus sagittis, gravida consequat dui. Praesent nec quam eu ligula ullamcorper gravida. Mauris et quam volutpat, blandit orci sit amet, convallis nibh. Proin maximus neque suscipit ex egestas, et scelerisque nisi blandit. Suspendisse nunc dui, ullamcorper vel metus non, condimentum tristique nisi. Nulla nunc mauris, euismod non velit ac, consequat fringilla lectus.</p>
<p>Ut nulla purus, dictum ultrices accumsan ultricies, tincidunt vitae libero. Pellentesque auctor nisl fringilla justo fringilla condimentum. Maecenas nisi lacus, tincidunt id consequat eu, auctor sollicitudin ex. Nulla vel ante a lectus pellentesque ornare. Sed id pulvinar dolor. Integer eget dui nulla. Fusce in orci nec nisi ultrices ultricies a sed urna. Proin rutrum tristique erat, id facilisis mi. Donec nec est et odio convallis porta.</p>
<p>Sed ornare convallis nibh ultricies bibendum. Cras condimentum tristique ipsum, eu aliquam tortor porta et. Quisque auctor erat at felis feugiat pretium. Etiam finibus pharetra libero, vel suscipit odio. Mauris placerat mollis nibh sed varius. Sed at ipsum sem. Aliquam dictum pulvinar feugiat. Aenean vel suscipit libero. Nullam fringilla massa dapibus tellus tincidunt, in blandit turpis bibendum. Phasellus ac congue diam. Fusce consequat facilisis sagittis. Duis non suscipit mi.</p>
<p>Aliquam et sodales ligula, vel porta nulla. Fusce quis ante dictum, porttitor odio quis, dictum arcu. Maecenas maximus tincidunt euismod. Aliquam mauris est, posuere eu nisl hendrerit, elementum bibendum sem. Aenean in est augue. Nulla maximus neque non eros imperdiet, at malesuada tortor viverra. Curabitur dolor est, eleifend quis velit quis, placerat condimentum mi. Pellentesque tempus orci sit amet lacus lacinia, venenatis vestibulum magna euismod. Donec rutrum dignissim orci, nec dignissim sem faucibus nec. Nullam vel gravida nunc.</p>
<p>Aliquam justo velit, porta nec venenatis et, fringilla ac nisi. Praesent pharetra nulla ut nibh tristique, ac vulputate orci elementum. Mauris erat turpis, aliquet id fringilla in, iaculis in quam. Proin tortor arcu, viverra non fermentum at, pretium quis sem. Vivamus in ex molestie, tempor sem sed, feugiat dui. Aenean imperdiet augue et sem laoreet, sit amet porta tellus tristique. Aliquam et dapibus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ullamcorper vel lacus nec vulputate.</p>
<p>Sed sapien massa, laoreet vitae aliquam et, tincidunt in augue. Maecenas justo tellus, ullamcorper ut pellentesque non, pulvinar non mauris. Etiam eu molestie erat, ac tincidunt lectus. Morbi scelerisque dui malesuada justo venenatis, id porttitor sapien rhoncus. Vivamus sit amet turpis sit amet nibh elementum mollis eget in velit. Suspendisse hendrerit, felis at laoreet pharetra, magna lorem elementum tellus, vel vehicula arcu tortor in purus. Phasellus vehicula dui id dolor pellentesque imperdiet. Nam venenatis augue sed justo lacinia, et consequat nibh facilisis. Quisque auctor erat id sem tincidunt ultricies. Proin fringilla nisl at lectus viverra, sit amet rhoncus felis lobortis.</p>
<p>Suspendisse tempus imperdiet leo eget sollicitudin. Suspendisse blandit ultricies volutpat. Sed volutpat ligula id velit auctor, et eleifend sapien dictum. Aliquam in vestibulum odio. Donec metus orci, suscipit bibendum ex sit amet, fermentum facilisis sem. Morbi rhoncus turpis viverra dui lobortis auctor. Vestibulum sit amet ante metus. Sed ut ex id felis sollicitudin feugiat. Praesent lobortis convallis arcu, elementum malesuada sem dignissim vitae. Vivamus id vulputate nisl. Sed pulvinar vehicula lorem, vel imperdiet elit.</p>
<p>Proin orci erat, rhoncus ac fermentum nec, euismod non nisi. Sed ornare sapien vel interdum blandit. Duis odio sem, pretium ut diam non, tempus vestibulum mauris. Maecenas vitae sapien tempus, varius tortor posuere, ullamcorper purus. Nulla pulvinar quam ut orci tincidunt, eu sagittis ex aliquet. Donec vestibulum auctor est ac suscipit. Mauris tristique lacinia euismod. Nulla ante elit, ornare et luctus vitae, vehicula at ex. Nulla vel tristique dui. Nulla ac sagittis lectus. Curabitur auctor semper felis, et tempus turpis euismod eget. Morbi tempus auctor ante, nec volutpat leo accumsan sed. Nullam ullamcorper odio at nunc ornare porta. Cras at lacus dapibus, convallis lectus ut, elementum tortor. Sed at mauris mi.</p>
<p>Cras egestas mi libero, vel pharetra libero congue eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pharetra, arcu quis tincidunt ullamcorper, arcu sem finibus justo, et luctus nunc justo in nunc. Fusce tempus fringilla diam a mattis. Ut nec est nisi. Fusce tristique nunc mauris, ut porttitor libero consectetur id. Donec libero orci, eleifend eget sagittis ut, venenatis ac justo.</p>
<p>Praesent auctor porta turpis at auctor. Quisque pulvinar nisi et dui convallis gravida. Aenean quis nulla neque. Pellentesque et erat at ipsum finibus ultricies. Curabitur eu euismod nulla, ac pretium augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat lacinia augue ac fermentum. Donec scelerisque finibus felis, vitae dignissim lorem ultrices in. Etiam convallis arcu sed libero convallis, non dictum dolor luctus. Etiam eget eros laoreet, ullamcorper justo quis, mattis nibh. Nullam mauris metus, aliquam at turpis vitae, luctus ullamcorper tortor. Nullam maximus posuere quam, id efficitur sapien.</p>
<p>Maecenas purus metus, egestas quis eleifend cursus, euismod nec quam. Suspendisse a volutpat ligula. Nulla dignissim lacus eget rutrum sollicitudin. Pellentesque commodo accumsan ultrices. Quisque porttitor orci laoreet, sollicitudin mauris vitae, sollicitudin velit. Nunc auctor volutpat efficitur. Sed tempor odio neque, ac vehicula dui tincidunt at. Nullam enim ex, fermentum non gravida faucibus, vulputate non augue. Praesent vulputate pharetra suscipit. Maecenas tempor venenatis leo ut ullamcorper. Cras cursus iaculis risus vel eleifend.</p>
<p>Nunc dictum lacinia leo eget venenatis. Sed aliquet scelerisque neque, a convallis nisl. Mauris tempus libero efficitur ornare molestie. Integer non finibus ex, vitae tempus massa. Donec quis sem erat. Maecenas consectetur, nibh ac porta feugiat, nisi mauris dictum quam, ac rhoncus nulla nibh in augue. Suspendisse tristique ligula ex, viverra fermentum nisi mattis a. Duis ullamcorper dapibus felis ornare maximus. Cras et hendrerit elit. Sed rutrum eleifend ante, ac interdum elit placerat ac. Duis a consequat lacus. Morbi congue orci eget est bibendum vehicula. Quisque nec erat nec sapien porta elementum vel eget libero. Donec condimentum tortor quam, eu porttitor erat lacinia non. Maecenas vitae laoreet massa. Aenean convallis erat a rhoncus fermentum.</p>
<p>Etiam augue enim, egestas vel auctor et, finibus nec mi. Cras vitae lectus vitae orci ullamcorper posuere. Aliquam enim massa, maximus eu nibh quis, rhoncus varius augue. Praesent quis libero diam. Cras ut sem tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non felis ac eros vehicula lobortis. Vestibulum malesuada leo sit amet bibendum sollicitudin. Ut euismod blandit purus at egestas. Nulla pellentesque risus vel libero vehicula efficitur. Nam id facilisis diam, vestibulum pulvinar metus. Nullam arcu eros, iaculis vitae lectus eu, porttitor facilisis massa.</p>
<p>Duis pellentesque tellus semper quam convallis, non condimentum odio auctor. Maecenas vitae blandit libero. Vivamus facilisis felis et est malesuada feugiat. Aenean quis augue ut mauris ultrices molestie. Aenean a velit elit. Sed sit amet viverra ex. Sed facilisis tempor placerat. In metus metus, venenatis sed nisi sit amet, posuere ultrices arcu. Integer laoreet fringilla est, quis interdum sem imperdiet ut. Sed sagittis fringilla orci non ornare. Donec viverra leo ut justo feugiat eleifend. Fusce dapibus vel ligula non convallis. Cras sed suscipit nisl, in varius diam. Vestibulum imperdiet blandit imperdiet. Proin accumsan augue quis turpis viverra pharetra.</p>
<p>Phasellus elementum nibh ac efficitur commodo. Donec vestibulum velit felis, eget mollis libero maximus ut. Proin semper purus nec libero volutpat, non feugiat nisl pellentesque. Nam fringilla lacinia dui, at feugiat odio vulputate id. Aenean condimentum congue justo eu interdum. Pellentesque at quam felis. Nulla ac elementum orci, in tristique ante.</p>
<p>Quisque in nisi consectetur, egestas urna id, iaculis ligula. Etiam varius lacinia velit, sit amet convallis sapien dignissim a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit diam. Nunc vehicula, urna sed iaculis volutpat, nisl ipsum tempus tellus, in tincidunt nulla ipsum sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse non tortor at mi blandit varius id at tellus. Maecenas congue et orci ut pharetra.</p>
<p>Proin rutrum laoreet velit, a finibus lorem interdum non. Proin pharetra sagittis commodo. Duis in diam in nunc accumsan dictum vitae vel orci. In vulputate nunc dolor, nec venenatis orci ultrices at. Sed convallis ipsum pharetra tellus sagittis, a malesuada magna laoreet. Duis dapibus fermentum viverra. Maecenas varius magna sit amet lacus accumsan viverra. Nullam erat massa, vulputate ut urna et, aliquam mollis sem. Maecenas lorem diam, suscipit gravida arcu sit amet, porta vulputate tellus. Proin varius placerat ligula. Phasellus et lacus sapien. Donec feugiat ut neque id rutrum. Maecenas luctus turpis enim, in cursus ipsum egestas eu. Aenean ornare dui mauris, quis consequat orci hendrerit at. In erat purus, vulputate eget lectus id, gravida semper elit.</p>
<p>Vestibulum tincidunt pellentesque velit, vitae aliquam neque convallis a. Curabitur sit amet lectus sit amet mi pharetra interdum vitae non enim. Sed molestie euismod metus sit amet ullamcorper. Nam porta consectetur laoreet. Nunc varius ultrices vestibulum. Morbi dignissim leo libero, eget rhoncus leo semper a. Suspendisse eget varius diam. Curabitur facilisis finibus erat, sit amet placerat neque faucibus a. Aenean id nisi lacus. Nunc vehicula, justo id pretium gravida, dui dolor posuere augue, id egestas enim tortor quis dui. Donec dictum aliquet arcu, in egestas tellus ornare et. Morbi feugiat vehicula lectus quis maximus. Mauris dictum, sapien et fringilla convallis, dui urna tristique nisl, id fermentum purus dui sed est. Pellentesque faucibus pretium pharetra.</p>
<p>Maecenas quam neque, faucibus non dapibus non, porttitor et diam. Fusce quis eleifend purus. Duis condimentum vitae tortor vel iaculis. Nulla porta ultricies semper. Phasellus sit amet neque lacus. Suspendisse egestas massa at imperdiet maximus. Nam ante justo, condimentum in malesuada et, cursus eu purus.
</main>
ASIDE: Here is the Fiddle I was working on before you supplied your CSS.

Answer 2

Mabe somthing like this?
section {
background:#ddd;
height:1000px;
}
header {
width:100%;
height:60px;
}
.logo {
position:relative;
float:left;
width:100px;
height:60px;
background:red;
opacity:.3;
}
nav {
position:relative;
float:left;
width: calc( 100% - 100px ); /* 100% - logo-width */
height:60px;
background:#eee;
}
}
<section>
<header>
<div class="logo">Logo</div>
<nav>
<div>Rest of nav</div>
</nav>
</header>
</section>