修复WordPress导航条在移动设备上的排列（响应式）。

0 人关注

网站：www.tarbooshla.com

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

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

2 个评论

Varun Kumar ：

你需要写一些代码来修改这个布局。它可以通过CSS来完成，但需要一个肮脏的黑客。如果你能编辑模板文件并知道一些HTML，我建议编辑你的header.php文件并重新排列元素。

Matt ：

有没有一个快速的解决方案，当浏览器被调整到移动设备的大小时，我可以将标志推到左边？从而为菜单和搜索图标留出足够的空间？

css

wordpress

Matt

发布于 2016-09-24

3 个回答

David

发布于 2016-09-24

0 人赞同

在当前的规则集下，它似乎完全按照预期显示。我想你是想让它显示在右边吧？我能够用padding属性大幅移动它，但我不认为这是对你最好的方案。搜索图标目前根本不是文本，而是一个在 ::before 情况下显示的伪元素，如果你想让它在达到一定尺寸后显示，我建议有一个媒体查询，将它设置为 ; 还有一个 ::after 伪元素，当它达到你的智能手机 @media and screen (max-width) 尺寸时显示。

Matt ：

等等，你用padding属性让它正确对齐？请告诉我。

David ：

哦，不，哈哈。我没能用对齐属性让它正确对齐。我不知道你到底想把它移到哪里。如果它不远，我只是让你知道，以我的知识和 inspect element chrome extension，它不是不可移动的。看起来你的需求是重新安排html的顺序，可能还有一些额外的css，就像另一个用户提到的。

Kushal Rai

发布于 2016-09-24

0 人赞同

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

Matt ：

如果我在浏览器尺寸缩小的时候把标志推到左边呢？我宁愿这样做，问题是，我对WordPress的文件编辑不熟悉--你知道我如何用CSS调整规则--所以当浏览器缩小时（接近移动设备的大小），标志可以向左对齐，从而为搜索图标和菜单图标腾出空间，使其在右边？

Varun Kumar

发布于 2016-09-24

0 人赞同

这段代码可能对你有帮助。请确保将此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;