如何将我的 header-logo 移到菜单项上方？

Question

我正在尝试针对移动设备优化我的 shopify 商店。但是我运行遇到了一个我无法解决的问题。我的移动版本现在看起来像这样：

我想使徽标更大，但我还需要显示其他图标。我想知道是否有可能将徽标移动到移动版本中其他图标上方的一行。所以我的手机 header 会有两条线路；第一个是徽标，第二个是所有其他图标。这看起来像这样：

我的商店 url 是：snow-pearl.com，我正在使用首次亮相的 shopify 主题。您可以通过单击 here.

找到 header.liquid 代码

如果这仅适用于移动版是不可能的，那么是否可以在桌面版和移动版中实施？在桌面版中徽标是否位于其他所有内容之上也没有关系。

非常感谢任何帮助或想法。非常感谢！

如果您需要了解更多信息，请随时询问。

Answer 1

您需要添加此 CSS 才能使您的块切换到列。

-webkit-flex-direction:column;
flex-direction: column;

Flex-direction documentation

在现有 CSS 上：

@media only screen and (max-width: 749px){
  .site-header__mobile-nav{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
  }
}

之后，您需要修正块的宽度。

如何将我的 header-logo 移到菜单项上方？

How to move my header-logo above the menu items?

html

css

mobile

header

shopify