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

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。

几乎每部手机都以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;
  }
}