custom code for desktop menu only

[robin]

Hi,
I'm hiding the main menu of my website until the user starts scrolling. Here is the jquery:

jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() > 120) {
        jQuery("nav.primary").fadeIn();
    }
    else {
        jQuery("nav.primary").fadeOut();
    }
    });

however, I never want to hide the mobile menu. How can I prevent this to happen? I tried to check it these ways because these are changing in my inspector when I go from desktop to mobile layout:

if (jQuery("body").hasClass( "lightbox-css-on" ))
if (jQuery('nav.primary').css('max-height') == '566px')

but this doesn't seem to work. Any help?

Thanks !

Robin

[mariusjopen]

Hi @robin

I would go for this way:

if ($(window).width() > 767) {
// YOUR CODE HERE
}

Also have a look here:
http://laytheme.com/documentation.html#custom-javascript

Let me know if you got further.

Best!

Marius

[robin]

Hi,

thanks! It's almost perfect now. I still have one problematic situation when the user manually resizes the window under 767px wide because then the "Custom CSS for Desktop Version" is still loaded with the "display: none" property that I use on the menu so it is not visible when the page is loaded. I guess I could fix this with more javascript or maybe this should be implemented in the theme directly (loading the right custom css when user resizes the window)?

Thanks for your time.
Best,

Robin

[mariusjopen]

Have a look here:

<script>
  jQuery(function () {
    if (jQuery(window).width() > 600) {
      // YOUR CODE HERE	
    }

    jQuery(window).on('resize', function () {
      if (jQuery(window).width() > 600) {
         // YOUR CODE HERE	
      }
    });

    jQuery(window).on('resize', function () {
      if (jQuery(window).width() <= 600) {
        // YOUR DISABLING CODE HERE	
      }
    });
  });

</script>

Maybe you need to adjust it with this:
http://laytheme.com/documentation.html#custom-javascript

But that should cover it.

Best!

Marius