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

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

尝试添加以下代码：

如果您针对的是@media查询这里，您可能会选择合适的iPhones。

几乎所有的手机都是从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;
  }
}

​