如何将我的标题徽标移动到菜单项上方？

Question

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

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

我的商店网址是：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;
  }
}

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