I am making a website and I want it to be completely mobile responsive. I thought I had achieved that with the header until I had a look at it with my ipad. The "Trasnform: translateX(-100%);" statement works on everything except IOS devices I tried it on my android phone and it worked perfectly. I have tried plenty of things including using prefixes like -webkit- and using the "!important" statement. I have been searching around the web but I can't find anything that solves my problem. Here's the code.
HTML
<!DOCTYPE html>
<h<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 first"></div>
<div class="line second"></div>
<div class="line third"></div>
</div>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://4para.net/forums">Forums</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="role-finder.html">Role Finder</a></li>
<li><a href="orbat.html">ORBAT</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="featured">
<h1 class="devMode"> Development Mode</h1>
<p class="devModeText">Our 100% mobile friendly website is still under development. If you would like to provide feedback or suggestion please post them <a href="http://4para.net/forums/showthread.php?tid=28" target="window">here</a>, anything is helpful!</p>
</div>
</div>
</body>
</html>
CSS
@media screen and (max-width: 810px) {
/*header*/
.nav {
margin: 15px -40px ;
background-color: #3f3f3f;
transform: translateX(-100%);
transition: 0.6s ease;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
}
.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;
}
.open {
transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
.first {
position: relative;
top: 15px;
margin: auto;
}
.second {
position: relative;
top: 20px;
margin: auto;
}
.third {
position: relative;
top: 25px;
margin: auto;
}
/*end of header*/
.container {
margin: 0 10px 0 10px;
}
}
JS
$(function() {
$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});
});
UPDATE: My website was actually cached so opted into development mode with Cloudflare and turns out both methods work. Thank you so much to everybody who responded so quickly unlike me.
While you shouldn't have to, you might want to try
translate3d(x,y,z)instead oftranslateX(x). For example:Reasoning is taken from this GitHub issue