How to Enable Hamburger Menu for Tablet/Ipad using Shopify | Debut Theme 2020

To show the hamburger menu on tablet and Ipad,

This solution is for old (2019) Debut Version in which @mixin are used

Find
$grid-breakpoints:
in your Assets -> theme.scss file.

It will look like this:

$grid-breakpoints: (
  $small '(max-width: #{$grid-medium - 1})',
  $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
  $medium-down '(max-width: #{$grid-large - 1})',
  $medium-up '(min-width: #{$grid-medium})',
  $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
  $large-down '(max-width: #{$grid-widescreen - 1})',
  $large-up '(min-width: #{$grid-large})',
  $widescreen '(min-width: #{$grid-widescreen})'
);

And replace it with the following code:

$custom-grid-medium: 769px;
$grid-breakpoints: (
  $small '(max-width: #{$custom-grid-medium - 1})',
  $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
  $medium-down '(max-width: #{$grid-large - 1})',
  $medium-up '(min-width: #{$grid-medium})',
  $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
  $large-down '(max-width: #{$grid-widescreen - 1})',
  $large-up '(min-width: #{$grid-large})',
  $widescreen '(min-width: #{$grid-widescreen})'
);

In this code i replace the first variable "$grid-medium" with new variable called "$custom-grid-medium".

Note: After implementation you need to adjust some areas of your theme according.