修复移动设备上的 WordPress 导航栏对齐（响应式）答案

【问题标题】：Fixing WordPress navbar alignment on mobile devices (responsive)修复移动设备上的 WordPress 导航栏对齐（响应式）
【发布时间】：2016-09-24 16:53:55
【问题描述】：

网站：www.tarbooshla.com

在移动设备上查看时，搜索图标未与导航栏的其余部分（徽标和菜单图标）对齐。我怎样才能解决这个问题？

我已尝试更新所有主题和插件，但无济于事。

【问题讨论】：

你需要写一些代码来修改这个布局。它可以通过 CSS 完成，但有一个肮脏的 hack。如果您可以编辑模板文件并了解一些 HTML，我建议您编辑 header.php 文件并重新排列元素。
是否有快速解决方法，当浏览器调整为移动设备大小时，我可以将徽标向左推？因此，为菜单和搜索图标腾出足够的空间？

标签： css wordpress

【解决方案1】：

它似乎完全按照当前规则集的预期显示。我假设您希望它填充在右侧？我可以使用 padding 属性大幅移动它，但我认为这对你来说不是最好的方案。搜索图标目前根本不是文本，而是在::before 场景中显示的伪元素，如果您希望它在达到一定大小后显示，我建议使用媒体查询将其设置为display:none;和一个::after 伪元素，当它到达您的智能手机@media and screen (max-width) 尺寸时显示。

【讨论】：

等等，你让它使用 padding 属性正确对齐了吗？说吧。
哦，不，哈哈。我无法让它与 align 属性正确对齐。我不知道你想把它移到哪里。如果距离不远，我只是让您知道，根据我的知识和检查元素 chrome 扩展，它不是不可移动的。您的需求似乎是对 html 的重新排序，可能还有一些额外的 css，就像另一位用户提到的那样。

【解决方案2】：

这是因为移动设备的空间有限而发生的。所以你可以做的是进入 header.php 并将搜索栏与主页、关于我们等一起放在主导航栏内，这样搜索就会出现一次用户按下菜单按钮。或者在 css 的帮助下，将菜单向左对齐，以便搜索按钮可以适合右侧。

【讨论】：

浏览器缩小的时候，把logo往左推怎么办？我宁愿这样做，问题是，我不熟悉在 WordPress 中编辑文件——你知道我如何使用 CSS 调整规则——所以当浏览器缩小（接近移动设备大小）时，徽标可以对齐左侧，从而为右侧的搜索图标和菜单图标腾出空间？

【解决方案3】：

此代码可能会对您有所帮助。确保将此 CSS 代码添加到一个位置，以便在加载所有其他 CSS 之后加载（因此具有最高优先级）

@media only screen and (max-width: 767px) {
    #Top_bar .logo {
        text-align: left;
    }

    #Top_bar .top_bar_left {
        float: left;
        width: 80% !important;
        margin-top: 10px;
        background: none !important;
    }

    .header-classic #Top_bar .top_bar_right {
        top: 15px;
        float: right;
    }

}

【讨论】：