Storefront: switch to mobile layout for 768px-wide

Question

I am developping a child theme of Woocommerce Storefront.

On a tablet (portrait, 768px wide), I would like the "mobile" layout (burger menu, etc) to be displayed, instead of the the desktop layout (main-menu, etc).

I used the following css media queries: @media (max-width: 768px) for mobile @media (min-width: 769px) for desktop in my css file.

But all the media queries of storefront seem to activated desktop layout for @media (min-width: 768px).

How can I change this breakpoint?

EDIT 1: I tried to edit the file wp-content/themes/storefront/assets/sass/utils/_variables.scss to

$desktop:           769px;
$handheld:          768px;

but it doesn't change the layout.

EDIT 2: I tried this in the functions.php

// Change Woocommerce css breaktpoint from max width: 768px to 767px  
add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');
function woo_custom_breakpoint($px) {
  $px = '769px';
  return $px;
}

but it doesn't work either.

Answer 1

I changed the breakpoint value in /storefront/assets/sass/utils/_variables.scss and recompile all Storefront files (including sass files) using the grunt file in storefront. Just run $ grunt.