如何使用 Shopify 为 Tablet/Ipad 启用汉堡菜单 |出道主题曲 2020

Question

我一直在寻找一种方法来在 Ipad 或平板电脑上启用首次亮相的汉堡包主题菜单。一切都适用于移动设备，但我希望能够在平板电脑和 Ipad 上看到汉堡包菜单。希望可以有人帮帮我。谢谢！

Answer 1

在平板电脑和 Ipad 上显示汉堡包菜单，

此解决方案适用于使用@mixin 的旧 (2019) 首次亮相版本

查找 $grid-breakpoints: 在您的资产 -> theme.scss 文件中。

它看起来像这样：

$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})'
);

并将其替换为以下代码：

$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})'
);

在这段代码中，我用名为“$custom-grid-medium”的新变量替换了第一个变量“$grid-medium”。

注意：实施后您需要根据需要调整主题的某些区域。

Answer 2

2020 年首发版本

复制您的 Assets 的所有代码 -> theme.css.liquid 并将其粘贴到任何编辑器（即 Sublime）

找到max-width: 749px并将所有实例替换为max-width: 768px

也替换：

min-width: 750px 与 min-width: 769px

这会起作用。