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

Well the phone could access the jQuery site... and it was connected to 4G, I was at school so I couldn't connect to wifi.

Do I have to have to do something that's similar to @media in CSS? Just not in CSS but in Jquery.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.