【问题标题】: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;
    }

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-10
    相关资源
    最近更新 更多