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 Like
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 Likes
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 Likes
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 Likes
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 Likes
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 Likes
body.f-nav-hidden .d-header-wrap {
animation: none !important;
opacity: 1 !important;
z-index: 1000 !important;
}
- I see this behavior also with the floating style timeline on mobile:
Note that I’m testing the navbar with a little more height (room for the buttons) but I think the general issue is not related to it.
- I wonder if it could be possible to allow the ‘New topic’ button? I really want to try putting it on the bottom right and using the top-right search common behavior.
That will free some space in the mobile experience, respect the actual social-media basis and keep all the functionality.
1 Like
Hello
Thanks, I’ve made some updates here. UX: Nav bar fixes and nested replies support - Pull Request #9 - VaperinaDEV/f-nav-for-mobile - GitHub
Note: The position is calculated from the --f-nav-height variable so if you change the height, use this.
It’s possible to add a button with /new-topic destination 
1 Like
Wonderful, thanks! Is dreaming of having this button dynamically reply in topics something possible / to consider?
Just sharing ideas. I’m using your theme component as is, and it is one of my favorites 
With this dynamic button, the Theme Component should also be able to hide the default reply button, like it already does with the hamburger and top right ones.
I think this will allow to display the bottom navigation on topics in one line and display everything more cleaner.
Would it be possible to undo the action of opening AI chats after entering the chat, just as happens by default when clicking the default icon at the top?
Currently, when opening the AI chat from F NAV, there is no way to return to the main Discourse screen.
I hope it will be possible; I really like the buttons on the bottom 
1 Like
Can you provide some screenshots what do you mean exactly? 
1 Like
Sure! When pointing a F NAV button to /discourse-ai/ai-bot/conversations (and manually hidding the top right icon for AI Bot chat on mobile), the path works but there is no way to return to the forum.
This is the default behavior that F NAV could imitate in this specific button to allow the `back to forum` behavior:
NOTE: The setting to enable that icon on top navbar of Discourse is
ai_bot_add_to_header
1 Like