0

I'm trying to fix my responsive menu so that when I click on a link - the menu slides up - it is on http://ineedaweatherforecast.co.uk/index.html

<script>

$(document).ready(function() {
    $('.toggle-nav').click(function(e) {
        $(this).toggleClass('active');
        $('.menu ul').slideToggle('active');

        e.preventDefault();
    });
});
</script>

<script>

    $(document).ready(function() {
        if ( $(window).width() < 1061) {  
    $('.switch').click(function() {
        $('.menu ul').slideToggle();
  });
};
    });
</script>

The problem I have is that this also slides the menu up on desktop/tablet which I don't want - hence trying "if ( $(window).width() < 1061) {" to only do so at screen sizes of 1060 or less - ie the screen size where I use the hamburger menu - but this does not work.

Can anyone kindly assist? Going a little loco!

Thanks James

James Winfield
  • 51
  • 10

1 Answers1

0

I would recommend using User Agent to detect what type of device the user is on, or even what browser they are on.

This is a good post talking about different ways for mobile detection with jQuery - What is the best way to detect a mobile device in jQuery?

Community
  • 1
  • 1
Dufud6
  • 1
  • 1