After the new update, this isn’t working anymore. @Don did you made some relevant changes or something?
Hello 
Nope, I don’t think. The last change was 2 months ago. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub
Yes, it started working all again. Some other theme components were causing the issue.
1개의 좋아요
Hello Hmm I cannot reproduce this… what device and browser you use?
Hi Don, thank you for reply.
It’s very strange. Below are several browsers I tested, and the same phenomenon occurred. 
Edge browse on PC
Iphone Discourse Hub App
Iphone Safari
Andriod Edge
I used the following CSS to adjust the position, and it works pretty well.
/* Use Flexbox to center chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Ensure the container has a positioning context */
}
/* Ensure the number element's styles do not interfere with centering */
.chat-channel-unread-indicator__number {
display: inline-flex;
align-items: center;
justify-content: center;
}
2개의 좋아요
Looks cool. Would be nice to show it for non-logged in users too
@Don do you accept PRs? I added a feature to add an extra functions to open up a modal menu where you can add additional items.
in our use case, we want to create a submenu to have multiple variations when creating a new topic (eg. submit a bug report, submit a support request, submit an idea, create new journal or create regular new topic)
See: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
4개의 좋아요
Quick update about my Fork of “F-NAV for Mobile” with Back Button, Custom Submenu, and Visibility Controls. Works best with 3.6beta1
Why this fork?
- Provide a header “Back” button on topic pages that mirrors common mobile app UX
- Offer a “customMenu” tab type that opens a configurable submenu (ideal for linking to multiple destinations; we use it to add custom pre-populated “New Topic” links)
- Add group-based visibility to tabs and menu items, so you can show certain items to staff only, etc.
- Small fixes with some deprecations and polishing of styles/accessibility
Summary about newly added features here
- Header Back Icon (optional)
- Replaces the header home logo with a back arrow on topic pages
- Behavior: go back if there’s history, otherwise route to “/”
- Toggle with setting:
header_back_icon_enabled
- Custom Submenu tab type
- New f_nav_tabs function: customMenu
- New setting: f_nav_submenu_items
- Configure menu items with label and URL (optional icon)
- Great for quick access to multiple pages from a single tab
- Group‑based visibility controls
- Tabs, submenu items, and profile_extra_items can be limited to selected groups
- Behavior:
- Empty groups => visible to all
- If groups set => only members of at least one selected group can see
- Anonymous users can’t see restricted items
- Optional: Hide nav bar on topic pages
- Toggle with setting: hide_nav_in_topic
- Zipped “build” artifacts and testing docs
- Convenience build artifacts (v1–v5) under builds/
- TESTING_GUIDE.md and TEST_RESULTS.md documenting manual validation
Enhancements to existing features
- F‑NAV items and tabs
- Adds visibleTabs getter to respect group visibility
- Integrates the new CustomSubmenu component into FNavItem flow
- Header avatar/profile menu
- Mobile view detection moved into the component, improving behavior and resolving warnings
- Profile extra items now support group‑based visibility
- Styling and accessibility
- New SCSS for the custom submenu and the back icon
- Consistent hover/active/focus-visible states
- Consistent border‑radius with core variables; refined padding/spacing (e.g., back button padding set to 0)
Bug fixes and maintenance
- Resolve site.mobileView deprecation warnings by moving checks from initializers into component rendering
- Fix a rendering edge case by moving a function out of the block
- Minor polish to match Discourse header behaviors (hover/active states, opacity transitions)
- Small CSS tidy-ups (e.g., ensure back button padding is zero, prevent accidental sizing shifts)
High‑level comparison (Original vs Fork)
- Original (main): F‑NAV mobile tabs + chat optional import; no back button or custom submenu
- Fork (feat/home-logo-arrow-back):
- Adds header back icon feature with routing fallback
- Introduces “customMenu” tab function with configurable submenu items
- Adds group‑restricted visibility for tabs, submenu items, and profile items
- Optionally hides the F‑NAV on topic pages
- Improves a11y and consistency of interaction states
- Provides testing docs and packaged builds
Notes:
- This component targets recent Discourse versions that support the Discourse Plugin API level 1.14+ (as indicated in the initializers)
- If you rely on group‑based visibility, ensure your groups and memberships are configured first
Word of warning: Please test with caution as I am not a coder, and the TC was made and tested entirely with AI.
Shoutout to Don for this great component, it’s a fantastic addition to Discourse UX/UI! 
3개의 좋아요
Hi, your css seems to hide the default current user without toggle the option in settings, so the css rule display none is hardwired. Would appreciate this not be the case.
The custom menu you crafted is there a way to style the color of the items?
This white space at the top issue has appeared again on mobile. I’ve updated everything, but it still happens.
Since the last Discourse update, the f-nav component is crashing Discourse on Android. 
2개의 좋아요
Hello
Thanks for the report! I’ve merged an update to fix the issues you experienced on latest Discourse. Please update the theme component!
https://github.com/VaperinaDEV/f-nav-for-mobile/pull/8/changes
6개의 좋아요
body.f-nav-hidden .d-header-wrap {
animation: none !important;
opacity: 1 !important;
z-index: 1000 !important;
}
- 모바일에서 플로팅 스타일 타임라인에서도 동일한 문제를 확인했습니다:
참고로 저는 버튼 공간을 확보하기 위해 네비게이션 바의 높이를 약간 높여 테스트하고 있지만, 일반적인 문제는 이 부분과 무관하다고 생각합니다.
- ‘새 주제’ 버튼을 허용할 수 있을지 궁금합니다. 우측 하단에 배치하고, 우측 상단 검색 기능의 일반적인 동작 방식을 활용해보고 싶습니다.
이렇게 하면 모바일 환경에서 공간을 절약할 수 있고, 실제 소셜 미디어의 기본 구조를 존중하면서 모든 기능을 유지할 수 있습니다.
1개의 좋아요
안녕하세요
감사합니다. 여기에서 몇 가지 업데이트를 했습니다. UX: Nav bar fixes and nested replies support - Pull Request #9 - VaperinaDEV/f-nav-for-mobile - GitHub
참고: 위치는 --f-nav-height 변수에서 계산되므로 높이를 변경하는 경우 이 변수를 사용하십시오.
/new-topic 목적지로 버튼을 추가할 수 있습니다 
1개의 좋아요
훌륭합니다, 감사합니다! 이 버튼이 토픽에서 동적으로 응답하도록 하는 것을 꿈꾸는 것이 가능한가요? 아니면 고려해 볼 만한가요?
단순히 아이디어를 공유하는 것입니다. 테마 구성 요소를 그대로 사용 중이며, 제 최애 중 하나입니다 
이 동적 버튼을 사용하면, 햄버거 메뉴와 오른쪽 위 버튼처럼 기본 응답 버튼도 숨길 수 있어야 합니다.
이렇게 하면 토픽에서 하단 내비게이션을 한 줄로 표시하고 모든 요소를 더 깔끔하게 배치할 수 있을 것 같습니다.
상단 기본 아이콘을 클릭할 때와 마찬가지로, 채팅에 진입한 후 AI 채팅을 여는 동작을 되돌릴 수 있게 해주는 기능은 가능할까요?
현재 F NAV에서 AI 채팅을 열면 메인 Discourse 화면으로 돌아가는 방법이 없습니다.
가능하길 바랍니다. 하단의 버튼들을 정말 좋아합니다 
1개의 좋아요
정확히 어떤 의미인지 스크린샷 몇 장을 제공해 주시겠어요? 
1개의 좋아요
