ヘッダーメニューがおかしなことになります。

レスポンシブヘッダーメニューで、スマホのメニュー開いた後にドラッグして、PCサイズに拡大するとPCのメニュー幅が変わってしまいます。また、スマッホのメニューを開いたままPCサイズに拡大すると灰色になってしまいます。

$('#contents').prepend('<div class="overlay"></div>');
$('.button').click(function() {
    $('header').toggleClass('navOpen');
    $('#wrap').toggleClass('fixed');
    $('.overlay').toggle();
    var headerH = $('header').outerHeight();
    if ($('header').hasClass('navOpen')) {
        $('header nav').css('marginTop', headerH + 'px');
    }
});
 
 
$('.overlay').click(function() {
    $(this).fadeOut(300);
    $('header').removeClass('navOpen');
    $('#wrap').removeClass('fixed');
});
コード

html,
1	margin: 0;
2	padding: 0;
3	border: 0;
4	font-size: 100%;
5	font: inherit;/*vertical-align: baseline;*/
6}
7body {
8	margin-right: auto;
9	margin-left: auto;
10	font-size: 13px;
11	box-sizing: border-box;/*RWDでは必須。計算方法を変える*/
12}
13img {
14	vertical-align: center;
15	border: none;
16	width: 100%;/*RWDでは必須指定*/
17	height: auto;
18}
19
20.clearfix:before, .clearfix:after {
21	content: " ";
22	display: table;
23}
24.clearfix:after {
25	clear: both;
26}
27/*.clearfix {
28 *zoom: 1;
29}*/
30.fixed {
31	top: 0;
32	left: 0;
33	width: 100%;
34}
35.overlay {
36	position: fixed;
37	top: 0;
38	left: 0;
39	display: none;
40	width: 100%;
41	height: 100%;
42	background: #666666;
43	opacity: 0.7;
44	filter: alpha(opacity=70);
45	-ms-filter: "alpha(opacity=70)";
46	z-index: 999;
47}
48/*ヘッダーの色太さと色指定*/
49header {
50	position: fixed;
51	top: 0;
52	left: 0;
53	width: 100%;
54	background: #000000;
55	box-shadow: 0 0 3px rgba(0, 0, 0, .2);
56	z-index: 9999;
57	-webkit-user-select: none;
58	-moz-user-select: none;
59	user-select: none;
60}
61
62header .inner {
63	position: relative;
64	max-width: 1400px;
65	width: 95%;
66	margin: 0 auto;
67	padding: 0.5em 0;
68	-webkit-box-sizing: border-box;
69	-moz-box-sizing: border-box;
70	box-sizing: border-box;
71}
72
73header h1 {
74	float: left;
75	width: 30%;
76	
77	margin-top: 10px;
78	margin-bottom: 10px;
79	font-size: 40px;
80	font-weight: bold;
81	color: #FFFFFF;
82}
83
84header nav {
85	float: left;
86	width: 70%;
87}
88header.navOpen nav {
89	opacity: 1;
90	right: 0;
91}
92header nav ul {
93	width: 100%;
94	padding: 0 0 0 0px;
95	margin-top: 12px;
96}
97
98header nav ul li {
99	float: left;
100	
101	list-style-type: none;
102	margin-right: 20px;
103	
104	margin-bottom: 10px;
105	
106}
107
108	position: relative;
109	display: block;
110	padding: 0.5em;
111	font-size: 20px;
112	text-decoration: none;
113	color: #FFFFFF;
114}
115
116header nav ul li a:hover {
117	color: #FF00AB;
118}
119
120header .button {
121	display: none;
122	width: 30px;
123	position: absolute;
124	top: 20px;
125	right: 15px;
126	cursor: pointer;
127}
128
129header .button span {
130	display: block;
131	height: 4px;
132	width: 100%;
133	background: #FFFFFF;
134	border-radius: 2px;
135	-webkit-transition: all .5s ease-in-out;
136	-moz-transition: all .5s ease-in-out;
137	transition: all .5s ease-in-out;
138}
139
140header .button span:nth-of-type(2), header .button span:nth-of-type(3) {
141	margin-top: 5px;
142}
143header.navOpen .button span:nth-of-type(1) {
144	-webkit-transform: translateY(9px) translateX(0) rotate(45deg);
145	-ms-transform: translateY(9px) translateX(0) rotate(45deg);
146	transform: translateY(9px) translateX(0) rotate(45deg);
147}
148header.navOpen .button span:nth-of-type(2) {
149	margin-top: 5px;
150	opacity: 0;
151	-webkit-transform: translateY(9px);
152	-ms-transform: translateY(9px);
153	transform: translateY(9px);
154}
155header.navOpen .button span:nth-of-type(3) {
156	-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);
157	-ms-transform: translateY(-9px) translateX(0) rotate(-45deg);
158	transform: translateY(-9px) translateX(0) rotate(-45deg);
159}
160
161@media screen and (max-width:680px) {
162header h1 {
163	width: auto;
164	margin-top: 0;
165}
166header .button {
167	display: block;
168}
169
170header nav {
171	overflow: auto;
172	position: fixed;
173	top: 0;
174	right: -70%;
175	float: none;
176	width: 45%;
177	max-width: 680px;
178	height: 100%;
179	background: #000000;
180	opacity: 0;
181	z-index: 9999;
182}
183header nav ul li {
184	float: none;
185	width: auto;
186}}コード

  <div class="inner"> <a href="Index.html"><h1>LOGO</h1>
    </a> 
   
    <p class="button"> <span></span> <span></span> <span></span> </p>
   
    <!--<nav role="navigation" style="margin-top: 93px;">-->
    <nav role="navigation"> 
      <!--<ul class="clearfix">-->
      <ul id="nav">
        <li><a href="Newspage.html">ニュース</a></li>
        <li><a href="#">キャストスタッフ</a></li>
        <li><a href="Intorodaction.html">紹介</a></li>
        <li><a href="Story.html">あらすじ</a></li>
        <li><a href="#">登場人物</a></li>
        <li><a href="#">劇場情報</a></li>
      </ul>
    </nav>
  </div>
</header>
コード