在移动设备上修复WordPress导航栏对齐（响应）

Question

Website: www.tarbooshla.com

When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?

I have tried updating all the themes and plugins to no avail.

Answer 1

It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone @media and screen (max-width) size.

Answer 2

发生这种情况是因为移动设备的空间有限。因此，您可以做的是进入header.php并将搜索栏与首页，关于我们的内容一起放在主导航栏中，因此一旦用户按一下，搜索就会出现菜单按钮。或者在CSS的帮助下，将菜单向左对齐，以便搜索按钮可以位于右侧。

Answer 3

This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )

@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;
    }

}