# F NAV - 移动端导航选项卡
**URL:** https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277
**Category:** Theme component
**Tags:** mobile
**Created:** [2024年十二月13日 13:12 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277 "2024-12-13T13:12:16Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@CAX.DO](https://meta.discourse.org/u/CAX.DO)
#### Post date: [2025年一月18日 15:39 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/22 "2025-01-18T15:39:21Z")
谢谢你，Don。这就是我想要的答案。 👍
不过，我需要详细了解如何启用此设置。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年一月18日 15:56 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/23 "2025-01-18T15:56:13Z")
> [@CAX.DO](#):
>
> 不过，我需要详细了解如何启用此设置。
您可以在手机的辅助功能设置中找到“减弱动态效果”。它现在可能已打开，因此如果您将其关闭，外部菜单点击将起作用。但也许启用它是出于好理由，并且通过滑动关闭菜单更容易。🙂
---
### Author:  [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [2025年一月31日 17:49 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/24 "2025-01-31T17:49:36Z")
我喜欢它，Don
但如果想隐藏汉堡菜单，fkb pro 主题似乎存在问题，就像[这里](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/4?u=david_ghost)和这里一样：
仍然有汉堡图标空间
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年二月1日 14:30 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/25 "2025-02-01T14:30:09Z")
你好 👋
感谢你的报告，我已经将修复合并到 [FKB Pro - Social theme](https://meta.discourse.org/t/fkb-pro-social-theme/234323) 中了 🙂
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2025年二月18日 13:57 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/26 "2025-02-18T13:57:02Z")
Bug 报告：在 3.4.0beta 版本中，切换到聊天后聊天图标未隐藏：
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年二月18日 14:24 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/27 "2025-02-18T14:24:38Z")
你好 👋
这是设计使然。我们在 `/chat` 页面上隐藏 f nav，并使用默认的聊天标题。
就像我们在 Meta 上一样：
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2025年二月18日 14:25 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/28 "2025-02-18T14:25:55Z")
好的，明白了。那么唯一的方法就是通过 CSS 手动隐藏它？
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年二月18日 14:33 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/29 "2025-02-18T14:33:08Z")
您可以使用 CSS 完全隐藏它。
移动端/CSS
```scss
.d-header-icons {
.header-dropdown-toggle {
&.chat-header-icon {
display: none;
}
}
}
```
注意：当您在频道中时，这是您唯一可以看到聊天通知的地方。
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2025年二月18日 14:42 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/30 "2025-02-18T14:42:45Z")
是否可以移除聊天图标，但保留新消息的气泡指示器？
编辑：已自行解决，添加了 `一个 svg`
```css
.d-header-icons {
.header-dropdown-toggle {
&.chat-header-icon a svg {
display: none;
}
}
}
```
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [2025年三月14日 14:30 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/31 "2025-03-14T14:30:48Z")
您好 @don，我可以在图标下方添加主页、菜单等文本吗？
---
### Author:  [@Aurora](https://meta.discourse.org/u/Aurora)
#### Post date: [2025年四月10日 07:40 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/32 "2025-04-10T07:40:16Z")
消息有问题 - 它们没有加载。
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2025年四月10日 19:23 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/33 "2025-04-10T19:23:03Z")
您能分享一些设置细节吗？我的“Tests-passed”和“messages”功能工作正常。
---
### Author:  [@Aurora](https://meta.discourse.org/u/Aurora)
#### Post date: [2025年四月10日 21:15 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/34 "2025-04-10T21:15:11Z")
在 iPhone 的 Safari 中它不起作用，在 Chrome 浏览器中可以。
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2025年四月10日 22:44 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/35 "2025-04-10T22:44:29Z")
好的，感谢您提供的额外详细信息。我使用的是 Android。
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [2025年四月13日 13:52 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/36 "2025-04-13T13:52:12Z")
使用 Horizon 主题时，主题列表中的一个组件会导致滚动时顶部区域（徽标/元素区域）变为空白。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月13日 14:27 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/37 "2025-04-13T14:27:06Z")
> [@Aurora](#):
>
> 我遇到了消息加载问题。
很遗憾，我无法重现此问题。
> [@joo](#):
>
> 使用 Horizon 主题时
看来它与标题更改不太兼容。我将检查 Horizon 中发生的情况。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月14日 17:59 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/38 "2025-04-14T17:59:29Z")
好的，我想我明白了这里发生了什么。在 Horizon 主题中，`list-controls` 在您向下滚动时会固定在顶部，而 F NAV 默认会隐藏标题。这会导致您在屏幕截图中看到的这个间隙。
* * *
这段小 CSS 代码应该可以与 Horizon 主题配合使用。
它会在您向下滚动时将其固定在页面顶部，而不是根据标题的高度。
移动端 / CSS
```scss
body.f-nav-hidden {
.list-controls {
top: 0;
}
}
```
* * *
未来，也许可以添加一个设置来处理标题的外观。
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [2025年四月23日 06:06 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/39 "2025-04-23T06:06:25Z")
在最新的 Discourse 上不起作用。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月23日 07:15 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/40 "2025-04-23T07:15:47Z")
你能澄清一下吗？
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2025年四月23日 08:10 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/41 "2025-04-23T08:10:46Z")
好的，明白了。感谢你的报告。`scrollTop` mixin 已从核心中移除，这导致了问题。但我们实际上并未将其用作，所以它可能只是被意外地留在了那里。已在此修复：[FIX: ScrollTop mixin removed from core · VaperinaDEV/f-nav-for-mobile@6ec554c · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile/commit/6ec554c9ed6a7710867b4a72a1b0cd8b79dab9fb)
请更新组件。
[上一頁](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=1)
[下一頁](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=3)