Horizon 主题 bug:分类标题容器在主题列表中粘滞

嘿,各位

当我向类别添加图片、图标或表情符号时,类别 category-heading 在向下滚动时会粘住,并占用大量空间。

CleanShot 2025-10-31 at 14.03.16

类别标题主题组件也受到影响,请参阅我下面的帖子作为参考。

3 个赞

是的,我同意这是一个烦人的副作用。

不幸的是,我对此没有解决方案。类别标题与导航位于同一个粘性元素中,我无法将粘性属性移到下一级,因为粘性在 flexed 元素内不起作用……

我建议您在移动设备上使用 CSS 隐藏或最小化徽标。

1 个赞

我也觉得粘性导航很碍眼。它占用了太多的空间。

我该如何关闭它?

没有相应的设置。您将不得不覆盖 CSS。

Horizon 主题有一个很棒的功能,即在滚动主题列表时,分类描述仍然可见:

虽然这在桌面上看起来不错,但在空间变窄时(例如在移动设备上),这使得主题列表很难阅读(特别是当文本很长时)

2 个赞

这是为了保持导航可见的无意后果。我不确定这是否可以修复(两个元素可能在同一个容器中?:thinking:),如果我必须选择,我会坚持我最初的意图。

不过,如果有人愿意看一下,请便。

1 个赞

我通过 CSS 解决了这个问题。

/* 在移动设备上禁用 Horizon 的粘性列表控件 */
@media (max-width: 767px) {
  .list-controls {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}
3 个赞

那岂不是在移动设备上让描述和导航都“取消固定”了?

我们真正希望的是描述消失,而导航保持固定。

2 个赞

导航栏也占用了太多空间。

目前我们正在考虑使用可滚动的标签页(Pills)。

我希望它能固定(sticky),但尚未实现。

1 个赞

没错,遗憾的是,如果不重新调整布局,仅通过 CSS 无法简单地实现这一效果。

Horizon 主题目前将整个 .list-controls 容器设置为固定定位,其中包含了分类标题。我们无法单独将子元素 .navigation-container 设置为固定定位,因为固定定位的元素会受限于其父级的滚动上下文。

我们可以重构该区域,但这属于会影响所有基于现有结构进行样式设计的主题的一类变更……因此,即使其他主题或自定义方案没有像这样使用固定导航栏,也极有可能导致回归问题。

1 个赞

那么,接下来的解决方案是什么呢?

我在想,我们是否应该直接在移动端隐藏 Horizon 的主题描述。毕竟,在如此紧凑的空间里,这信息有些重复了。

我在 TC 的“移动端”选项卡中通过一些简单的 CSS 实现了这一点:

.category-heading.--has-logo {
    display: none;
}

或许这应该被纳入 Horizon 中?

你刚刚已经指明了方向:使用自定义 CSS 根据你的喜好进行调整 :+1:

1 个赞

是的,但在这种情况下,这是一个与主题相关的更广泛的问题,而不仅仅是我的个人偏好。我很难想象会有人真的喜欢在移动设备上看到大面积的粘性分类描述——我认为这并非你当初设计时的本意。

1 个赞

人们究竟在社区中想要什么,确实难以预测。我决定保持现状,如果用户愿意,可以轻松地将其隐藏。这样比让他们困惑“为什么我的分类横幅在移动端不显示”要简单得多。

那么对于托管计划(例如免费计划),如果管理员无法添加自定义 CSS,该怎么办?

如果确实有人想要这个功能(我对此表示怀疑),是否可以通过主题设置来管理它?

1 个赞