0

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

Edited by Bensirpent07: Added more info

2
Contributors
3
Replies
12
Views
2 Years
Discussion Span
Last Post by Bensirpent07
0

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.

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.