ハンバーガーメニューの表示に関して

前提・実現したいこと

LPのテンプレートを使い編集しています。
スマホの実機でもハンバーガーメニューが反映させたいです。

発生している問題・エラーメッセージ

PCで画面幅を狭めて見るとハンバーガーメニューが表示されるのですが、スマホの実機で確認するとハンバーガーメニューが反映されないです。

該当のソースコード

html
1<!doctype html>
2<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
3<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
4<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
6
7<head>
8<meta charset="utf-8">
9<meta name="description" content="">
10<meta name="viewport" content="width=device-width, initial-scale=1">
11<title>Auro - Elegant, Minimal, Creative Bootstrap Template </title>
12<link rel="stylesheet" href="css/bootstrap.min.css">
13<link rel="stylesheet" href="css/flexslider.css">
14<link rel="stylesheet" href="css/main.css">
15<link rel="stylesheet" href="css/responsive.css">
16<link rel="stylesheet" href="css/animate.min.css">
17<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
18</head>
19
20<body>
21
22<!-- Header Section -->
23<section class="tophead" role="tophead"> 
24  <!-- Navigation Section -->
25  <header id="header">
26    <div class="header-content clearfix"> <a class="logo" href="#">Auro</a>
27      <nav class="navigation" role="navigation">
28        <ul class="primary-nav">
29          <li><a href="#header-slider">Home</a></li>
30          <li><a href="#services">Our Services</a></li>
31          <li><a href="#portfolio">Our Portfolio</a></li>
32          <li><a href="#testimonials">Testimonials</a></li>
33          <li><a href="#contact">Contact</a></li>
34        </ul>
35      </nav>
36      <a href="#" class="nav-toggle">Menu<span></span></a> </div>
37  </header>
38  <!-- Navigation Section --> 
39</section>

css
1#header.fixed .nav-toggle {
2	top: 18px;
3}
4.navigation.open {
5	opacity: 0.9;
6	visibility: visible;
7	-moz-transition: opacity 0.5s;
8	-o-transition: opacity 0.5s;
9	-webkit-transition: opacity 0.5s;
10	transition: opacity 0.5s;
11}
12.navigation {
13	float: right;
14}
15.navigation li {
16	display: inline-block;
17}
18.navigation a {
19	color: #000;
20	font-size: 13px;
21	font-weight: 300;
22	margin-left: 40px;
23	letter-spacing: 2px;
24	text-transform: uppercase;
25}
26.navigation a:hover, .navigation a.active {
27	color: #bcbcbc;
28}
29.nav-toggle {
30	display: none;
31	height: 44px;
32	overflow: hidden;
33	position: fixed;
34	right: 5%;
35	text-indent: 100%;
36	top: 32px;
37	white-space: nowrap;
38	width: 44px;
39	z-index: 99999;
40	-moz-transition: all 0.3s;
41	-o-transition: all 0.3s;
42	-webkit-transition: all 0.3s;
43	transition: all 0.3s;
44}
45.nav-toggle:before, .nav-toggle:after {
46	border-radius: 50%;
47	content: "";
48	height: 100%;
49	left: 0;
50	position: absolute;
51	top: 0;
52	width: 100%;
53	-moz-transform: translateZ(0);
54	-ms-transform: translateZ(0);
55	-webkit-transform: translateZ(0);
56	transform: translateZ(0);
57	-moz-backface-visibility: hidden;
58	-webkit-backface-visibility: hidden;
59	backface-visibility: hidden;
60	-moz-transition-property: -moz-transform;
61	-o-transition-property: -o-transform;
62	-webkit-transition-property: -webkit-transform;
63	transition-property: transform;
64}
65.nav-toggle:before {
66	background-color: #e84545;
67	-moz-transform: scale(1);
68	-ms-transform: scale(1);
69	-webkit-transform: scale(1);
70	transform: scale(1);
71	-moz-transition-duration: 0.3s;
72	-o-transition-duration: 0.3s;
73	-webkit-transition-duration: 0.3s;
74	transition-duration: 0.3s;
75}
76.nav-toggle:after {
77	background-color: #e84545;
78	-moz-transform: scale(0);
79	-ms-transform: scale(0);
80	-webkit-transform: scale(0);
81	transform: scale(0);
82	-moz-transition-duration: 0s;
83	-o-transition-duration: 0s;
84	-webkit-transition-duration: 0s;
85	transition-duration: 0s;
86}
87.nav-toggle span {
88	background-color: #fff;
89	bottom: auto;
90	display: inline-block;
91	height: 3px;
92	left: 50%;
93	position: absolute;
94	right: auto;
95	top: 50%;
96	width: 18px;
97	z-index: 10;
98	-moz-transform: translateX(-50%) translateY(-50%);
99	-ms-transform: translateX(-50%) translateY(-50%);
100	-webkit-transform: translateX(-50%) translateY(-50%);
101	transform: translateX(-50%) translateY(-50%);
102}
103.nav-toggle span:before, .nav-toggle span:after {
104	background-color: #fff;
105	content: "";
106	height: 100%;
107	position: absolute;
108	right: 0;
109	top: 0;
110	width: 100%;
111	-moz-transform: translateZ(0);
112	-ms-transform: translateZ(0);
113	-webkit-transform: translateZ(0);
114	transform: translateZ(0);
115	-moz-backface-visibility: hidden;
116	-webkit-backface-visibility: hidden;
117	backface-visibility: hidden;
118	-moz-transition: -moz-transform 0.3s;
119	-o-transition: -o-transform 0.3s;
120	-webkit-transition: -webkit-transform 0.3s;
121	transition: transform 0.3s;
122}
123.nav-toggle span:before {
124	-moz-transform: translateY(-6px) rotate(0deg);
125	-ms-transform: translateY(-6px) rotate(0deg);
126	-webkit-transform: translateY(-6px) rotate(0deg);
127	transform: translateY(-6px) rotate(0deg);
128}
129.nav-toggle span:after {
130	-moz-transform: translateY(6px) rotate(0deg);
131	-ms-transform: translateY(6px) rotate(0deg);
132	-webkit-transform: translateY(6px) rotate(0deg);
133	transform: translateY(6px) rotate(0deg);
134}
135.nav-toggle.close-nav:before {
136	-moz-transform: scale(0);
137	-ms-transform: scale(0);
138	-webkit-transform: scale(0);
139	transform: scale(0);
140}
141.nav-toggle.close-nav:after {
142	-moz-transform: scale(1);
143	-ms-transform: scale(1);
144	-webkit-transform: scale(1);
145	transform: scale(1);
146}
147.nav-toggle.close-nav span {
148	background-color: rgba(255, 255, 255, 0);
149}
150.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
151	background-color: #fff;
152}
153.nav-toggle.close-nav span:before {
154	-moz-transform: translateY(0) rotate(45deg);
155	-ms-transform: translateY(0) rotate(45deg);
156	-webkit-transform: translateY(0) rotate(45deg);
157	transform: translateY(0) rotate(45deg);
158}
159.nav-toggle.close-nav span:after {
160	-moz-transform: translateY(0) rotate(-45deg);
161	-ms-transform: translateY(0) rotate(-45deg);
162	-webkit-transform: translateY(0) rotate(-45deg);
163	transform: translateY(0) rotate(-45deg);
164}
165

js
1	// Mobile Navigation
2	$('.nav-toggle').on('click', function() {
3		$(this).toggleClass('close-nav');
4		nav.toggleClass('open');
5		return false;
6	});	
7	nav.find('a').on('click', function() {
8		$('.nav-toggle').toggleClass('close-nav');
9		nav.toggleClass('open');
10	});
11});