I am making a mobile header (ie hamburger). When I press on the icon it doesn't work. I have spent a lot of time trying to fix it but I am not very experienced with this sort of stuff. Here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="js/header.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="wrapper">
<div class="menu-icon">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="http://4para.net">Forums</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Role Finder</a></li>
<li><a href="#">ORBAT</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</head>
CSS
body {
margin: 0;
padding: 0;
background-color: #fff;
overflow-x: hidden;
font-family: 'PT Sans';
/*do not change it's for a bug*/
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
/*end of bug change*/
.container {
margin-left: 200px;
margin-right: 200px;
}
.main-content {
margin-top: 150px;
margin-bottom: 50px;
}
.featured {
margin-top: 75px;
width: 100%;
}
.textbox {
position: static;
margin-top: 20px;
}
.textbox p {
color: #d3d3d3;
font-size: 0.750em;
font-family: 'Alegreya Sans', sans-serif;
}
/*header*/
.header {
background-color: #3f3f3f;
width: 100%;
height: 100px;
position: fixed;
top: 0;
}
.wrapper {
width: 100%;
margin-top: 25px;
height: 75px;
position: absolute;
}
.logo {
float: left;
background-image: url(img/logo.png);
width: 100px;
height: 100px;
}
.nav {
margin: 15px 15px 0px 750px;
}
.nav ul{
margin: auto;
}
.nav ul li {
list-style: none;
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.nav a {
text-decoration: none;
font-family: Lucida, Serif;
color: #fff;
font-size: 1.500em;
}
.nav a:hover {
text-decoration: underline;
}
.menu-icon {
display: none;
}
/*end of header*/
/*mobile friendly*/
@media screen and (max-width: 1670px) {
/*header*/
.nav {
margin: 15px 15px 0px 500px;
}
/*end of header*/
@media screen and (max-width: 1400px) {
/*header*/
.nav {
margin: 15px 15px 0px 250px;
}
/*end of header*/
@media screen and (max-width: 1140px) {
/*header*/
.nav {
margin: 15px 15px 0px 200px;
}
/*end of header*/
@media screen and (max-width: 1080px) {
/*header*/
.nav {
margin: 15px 15px 0px 150px;
}
/*end of header*/
@media screen and (max-width: 1030px) {
/*header*/
.nav {
margin: 15px 15px 0px 100px;
}
/*end of header*/
@media screen and (max-width: 980px) {
.container {
margin-right: 0;
margin-left: 0;
}
}
@media screen and (max-width: 810px) {
.nav {
margin: 15px -40px ;
background-color: #3f3f3f;
transform: translateX(-100%);
transition: 0.6s ease;
}
.menu-icon {
position: relative;
margin-left: 10px;
display: block;
height: 54px;
width: 54px;
background-color: #2a2a2a;
/*border: 0.75px solid #000;*/
border-radius: 50%;
}
.line {
width: 38px;
height: 2px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.logo {
float: right;
}
.nav ul li {
list-style: none;
display: block;
padding: 10px 120px 10px 30px;
}
.nav .open {
transform: translateX(0) !important;
}
.nav ul {
transform: translateX(-100%);
transition: 0.6s ease;
}
}
JS
$(function() {
$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});
});