Alright so I'm trying to figure out why this code will show the menu bar on the computer when the page is loaded, but not on my Samsung Galaxy S4 whenever it's loaded. Here is the code, I can provide the link if needed, but I would prefer not to.
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>This is a test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="nav">
<div id="nav">
<ul id="nav">
<li id="nav" class="nav"><a href="/">Home</a></li>
<li id="nav" class="nav"><a href="/" aria-haspopup="true">Blog</a></li>
<li id="nav" class="nav"><a href="/" aria-haspopup="true">Work</a></li>
<li id="nav" class="nav"><a href="/">About</a></li>
</ul>
</div>
</div>
</body>
<script src="js/response.js"></script>
</html>
CSS
li.nav {
display: inline;
width: 25%;
float: left;
font-size: 26px;
}
li.nav2 {
display: block;
text-decoration: none;
}
ul#nav {
padding: 0 0;
margin: 0 0;
}
div#nav {
background-repeat: no-repeat;
background-size: 50px 50px;
width: 100%;
height: 100%;
}
Jquery
$(document).ready(function(){
if($(window).width() <= 525){
$('li#nav').removeClass('nav')
if($('li#nav').hasClass() != 'nav2'){
$('li#nav').addClass('nav2');
$('div#nav').css("background-image", "url(images/menu.png)");
$('ul#nav').hide();
}
}
$(window).resize(function(){
$width = $(window).width();
if($width <= 525){
$('li#nav').removeClass('nav')
if($('li#nav').hasClass() != 'nav2'){
$('li#nav').addClass('nav2');
$('div#nav').css("background-image", "url(images/menu.png)");
$('ul#nav').hide();
}
}
if($width >= 526){
$('li#nav').removeClass('nav2')
if($('li#nav').hasClass() != 'nav'){
$('li#nav').addClass('nav');
$('div#nav').css("background-image", "none");
$('ul#nav').show();
}
}
});
});
On the computer it shows this: http://imgur.com/wYiz2Hv
On the Samsung S4 it shows this (I'm using the Google Chrome app by the way): http://imgur.com/JryIwRh
