New Responsive Header Code
<!-- had issues positioning just th images so wrapped them in divs. Dis the same for the mini logo too-->
<div id = 'logoDiv'>
<img src="JHlogo.png" id="jhLogo">
</div>
<div id = "miniLogoDiv"> <!-- i moved it above the menu options to make styling easier-->
<img src="LogoImage.png" id="miniLogo">
</div>
<div id = "miniLogoDiv2"> <!-- i moved it above the menu options to make styling easier-->
<img src="LogoImage.png" id="miniLogo">
</div>
<a href="home.html" class="mOption" id="homeOption">Home</a>
<a href="locations.html" class="mOption" id="locationOption">Locations</a>
<a href="about.html" class="mOption" id="aboutOption">About</a>
<a href="beers.html" class="mOption" id="beersOption">Beers</a>
<a href="newsevents.html" class="mOption" id="newsOption">News</a>
<a href="contact.html" class="mOption" id="contactOption">Contact</a>
</div> <!-- end of the header -->
<!-- <div id="bleedArea"> Bleed Area </div> -->
<div id="smallLogo">
<img src="images/jhLogoSmall.png">
</div>
<div id="headTwitter" class="headerLinks" onclick="window.location.href='http://www.facebook.com'"> <a href="facebook.com" "></a></div>
<div id="headFacebook" class="headerLinks"> <a href="twitter.com" ></a></div>
<div id="menuButton" onclick="showBlackBox()">
<script type="text/javascript">
function showBlackBox()
{
document.getElementById('menuList').style.display="block";
document.getElementById('shadowBox').style.display="block";
}
function hideBox()
{
document.getElementById('menuList').style.display="none";
document.getElementById('shadowBox').style.display="none";
}
<div id="menulocation">Contact Us</div>
<div id="shadowBox" onclick="hideBox()">
<div id="menuList">
<div class="listOption" onclick="window.location.href='home.html'">
Home
</div>
<div class="listOption" onclick="window.location.href='locations.html'">
Locations
</div>
<div class="listOption" onclick="window.location.href='about.html'">
About
</div>
<div class="listOption" onclick="window.location.href='beers.html'">
Beers
</div>
<div class="listOption" onclick="window.location.href='news.html'">
News
</div>
<div class="listOption" onclick="window.location.href='contact.html'">
Contact
</div>
/*----------      header style   ------------*/
height:280px;
width: 100%;
background-color: rgb(23,23,23);
font-size: 23px;
/*font-size:0.696em;*/
z-index: 3;
display: block;
-webkit-box-shadow: -3px -19px 33px 23px rgba(0,0,0,0.75);
-moz-box-shadow: -3px -19px 33px 23px rgba(0,0,0,0.75);
box-shadow: -3px -19px 33px 23px rgba(0,0,0,0.75);
/*http://www.cssmatic.com/box-shadow*/
/*had to wrap the logo in an image to
centre it */
#logoDiv
{
height: 122px;
width: 507px;
/*margin-top: 30px;*/
margin-left: auto;
  margin-right: auto;
  /*border: 1px solid blue;*/
}
#jhLogo /*main logo div*/
{
height: 120px;
width: 505px;
/*border: 1px solid white;*/
margin-top: 30px;
}
/*-------- style for menu ----------*/
#menu
{
width: 100%;
height: 75px;
margin-top: 40px;
/* border-top: 1px solid gold;
border-bottom: 1px solid gold;*/
margin-left: auto;
  margin-right: auto;
  padding-bottom: -50px;
.mOption
{
/*display: inline-block;*/
/*border: 1px solid red;*/
margin-bottom: -50px;
margin-top: -60px;
position: absolute;
 display: block;
border: 1px solid blue;
height: 100px;
width: 100px;
margin-left: auto;
  margin-right: auto;
}
#miniLogoDiv2
{
display: none;
}
height: 100px;
width: 100px;
/*position: fixed;*/
border: 1px solid gold;
}
#homeOption
{
/*margin-left: 13.5% ;*/
margin-left: 13.8% ;
}
#locationOption
{
/*margin-left:24.5% ;*/
margin-left:24.7% ;
}
#aboutOption
{
/*margin-left: ;*/
/*margin-left: 38.3% ;*/
margin-left: 38.5% ;
}
#beersOption
{
/*margin-left: 56.7%;*/
margin-left: 57.1%;
}
#newsOption
{
/*margin-left:69.1% ;*/
margin-left:69.5%;
}
#contactOption
{
margin-left:81.1% ;
}
@media only screen and (max-width: 950px)
{
#header
{
font-size: 16px;
}
 display: none;
border: 1px solid blue;
height: 100px;
width: 100px;
margin-left: auto;
  margin-right: auto;
}
#miniLogoDiv2
{
display: block;
border: 1px solid green;
height: 75px;
width: 75px;
margin-left: auto;
  margin-right: auto;
}
height: 75px;
width: 75px;
/*position: fixed;*/
border: 1px solid gold;
}
.mOption
{
/*display: inline-block;*/
/*border: 1px solid red;*/
margin-bottom: -50px;
margin-top: -40px;
position: absolute;
#mobileHeader
{
display: none;
}
#mobileMenu
{
display: none;
}
#menuList
{
display: none;
}
#shadowBox
{
display: none;
}
@media only screen and (max-width: 750px)
{
#header
  {
    display: none;
  #mobileHeader
  {
    display: block;
    height: 200px;
    width: 100%;
    background-color: rgb(23,23,23);
    color: blue;
    z-index: 3;
    padding-top: 20px;
  #bleedArea
  {
  width: 100%;
  height:50px;
  background-color: gray;
  padding-top: 10px;
  text-align: center;
  color: white;
  }
  #smallLogo
  {
  width: 425px;
  height: 104px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  .headerLinks
{
display: inline-block;
/*margin-top: 25px;*/
position: absolute;
margin-left:90% ;
height: 50px;
width: 50px;
/*border: 1px solid gold;*/
}
margin-top: -40px;
background-image:url(images/footTweet.png);
background-size: 50px 50px;
  background-repeat: no-repeat;
}
#headTwitter:hover
{
/*margin-left: 88.4% ;*/
background-image:url(images/footTweetHover.png);
background-size: 50px 50px;
  background-repeat: no-repeat;
}
#headFacebook
{
margin-top: -105px;
background-image:url(images/footFacebook.png);
background-size: 50px 50px;
  background-repeat: no-repeat;
}
#headFacebook:hover
{
/*margin-left:94.4% ;*/
background-image:url(images/footFacebookHover.png);
background-size: 50px 50px;
  background-repeat: no-repeat;
}
#mobileMenu
{
display: block;
width: 100%;
height: 70px;
background-color:#6a6a6a;
z-index: 2;
}
#menuButton
{
margin-left: 3.5%;
margin-top: 10px;
float: left;
height: 50px;
width: 50px;
/*border: 1px solid black;*/
background-image:url(images/menuIcon.png);
}
#menuButton:hover
{
background-image:url(images/menuIconHov.png);
}
#menuLocation
{
margin-left: 20px;
margin-top: 10px;
float: left;
font-size: 40px;
color:white;
/*border: 1px solid black;*/
}
#shadowBox
{
display: block;
height: 100vh;
width: 100vw;
margin-top: -275px;
padding-top: 275px;
/*background-color: black;
opacity: .5;*/
position: absolute;
z-index: 2;
#menuList
{
z-index: 4;
width: 100%;
/*border: 5px solid pink;*/
/*opacity: 1;*/
display: none;
}
.listOption
{
width: 100%;
height: 100px;
border-bottom: 4px solid white;
border-top: 5px solid #282828;
background-color: #444444;
position: relative;
font-size: 30px;
color: white;
padding-top: 20px;
/*padding-top: 20px;*/
padding-left: 3.5%;
background-color: #707070;
cursor: pointer;
}
/*-------- end of header style----------*/
