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.
