如何使用Shopify为平板电脑/ Ipad启用汉堡菜单首次亮相2020

问题描述

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

解决方法

针对2020年版本

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

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

也替换：

min-width: 750px和min-width: 769px

这将起作用。

,

要在平板电脑和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})',$widescreen '(min-width: #{$grid-widescreen})'
);

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

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