如何使用Shopify为Tablet/Ipad启用汉堡菜单|首次亮相主题2020

Question

我一直在寻找在Ipad或平板电脑上启用首个主题汉堡菜单的方法。一切都可以用手机，但我希望能够在平板电脑和Ipad上看到汉堡菜单。希望有人能帮助我。谢谢！

Answer 1

首次亮相2020版

复制资产的所有代码->theme.css.lique精细化并粘贴到任何编辑器(即Sublime(中

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

同时替换：

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

这会奏效的。

Answer 2

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

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

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

它看起来是这样的：

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

在该代码中$网格介质"；其中新的变量被称为"$自定义网格介质"；。

注意：实现后，您需要根据主题的某些区域进行调整