如何在移动设备上对齐我的徽标和菜单图标

Question

我正在使用 WordPress，我也有一个响应式主题。当我在移动设备上查看我的网站时，菜单变成一个带有 3 条水平线的图标；它是一个滑出式菜单。

在移动设备上，菜单位于向左的 3 行上方，而不是彼此对齐。

这是菜单图标的代码：

.section-navi .pl-nav > li > a {
    line-height: 50px;
    padding: 0 13px;
    /* opacity: .7; */
}

这是徽标的代码：

.section-navi .navi-container {
    height: 36px;
    padding: 7px;
}

请访问：surveillanceshack.com 并在移动设备上查看。

Answer 1

尝试添加以下代码：

如果您的目标是 iPhone，您可能会选择适合 @media 查询 here。

几乎每个 phone 都从 min-device-width: 320px 开始，由您决定您想要的上限。

// iPhone 5 & 5S in portrait & landscape   
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  .section-navi .navi-container {
    min-height: 50px;
    padding-right: 0;
    box-sizing: border-box;
    text-align: left;
  }
}

如何在移动设备上对齐我的徽标和菜单图标

How can I align my logo and menu icon on a mobile device

css

media-queries