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
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?