CODEWITHSUNDEEP
jqueryjquery-mobilemobilenavigation
user681061
user681061

Reputation: 255

Navigation bar doesn't respond on mobile devices

I'm trying to find out why this doesn't work on iphone but works great on desktop. tried it at crossbrowsertesting.com and it works fine on android phones.. but not on iphone.

http://codepen.io/MarcRay/pen/vmJBn

   // Sticky Header
$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {
        $('.main_h').addClass('sticky');
    } else {
        $('.main_h').removeClass('sticky');
    }
});

// Mobile Navigation
$('.mobile-toggle').click(function() {
    if ($('.main_h').hasClass('open-nav')) {
        $('.main_h').removeClass('open-nav');
    } else {
        $('.main_h').addClass('open-nav');
    }
});

$('.main_h li a').click(function() {
    if ($('.main_h').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_h').removeClass('open-nav');
    }
});

// navigation scroll lijepo radi materem
$('nav a').click(function(event) {
    var id = $(this).attr("href");
    var offset = 70;
    var target = $(id).offset().top - offset;
    $('html, body').animate({
        scrollTop: target
    }, 500);
    event.preventDefault();
});

Upvotes: 0

Views: 126

Answers (2)

user2640633
user2640633

Reputation:

I know you can do the sticky header effect without using jquery or javascript by using the following excerpt from jquery mobile

To enable this toolbar feature type, you apply the data-fullscreen="true" attribute and the data-position="fixed" attribute to both the header and footer div elements. The framework will also unset the padding for the content container (.ui-content).

Upvotes: 0

Lansana Camara
Lansana Camara

Reputation: 9873

If what is shown on the Codepen is your full HTML, then the problem most likely lies within the lack of some code in your HTML.

Create a <head> and insert <meta name="viewport" content="width=device-width, initial-scale=1"> into it.

Read more on setting the viewport - Google Docs.

Upvotes: 1

Related Questions