Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android phones, but not on IOS. I have tried various solutions including using prefixes like -webkit- and using the "!important" statement, but nothing seems to work. Here is the code snippet:
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: I discovered that my website was cached. I enabled the development mode with Cloudflare and surprisingly, both methods are now working. Thanks to everyone who provided quick responses, unlike me.