F NAV - Mobile Navigation Tabs

Theme component
42

Does the component support adding a Post button to the F nav tabs ?

43

Do you mean create new topic tab?

44

Yes. Add a “Post New Topic” button to the F nav tabs area.
aaaaa

45

Sure, that’s possible just add the tab to that position in the setting.

3 Likes
46

Hello @Don,
Theme component is giving error after the latest update of discourse and it is not working

47

Hello :waving_hand:

4 Likes
48

I’m still using your SoundCloud Music Player component, and I have a couple of questions.

A couple of points on the SoundCloud Music Player:

  • Mobile Overlap: On mobile, it overlaps with “F NAV - Mobile”. Can its mobile position be optimized?
  • YouTube Music: Any plans to support YouTube Music in this component?
49

Hi, is it possible to add the new topic button to the bottom bar?

50
2 Likes
51

Thanks, It works. I was using your floating nav button component but was given me errors so I had to disable and remove it.

52

I’m thinking about adding this to my forum but I just tested it on the Theme Creator and when you have a draft in progress you cannot use the tabs because they are covered up:

The image shows a draft post titled "A basic guide on writing a basic guide (doc example)" within a how-to section on a platform, with a placeholder reminder "Post draft in progress. Tap to resume." (Captioned by AI)
The image shows a draft post titled "A basic guide on writing a basic guide (doc example)" within a how-to section on a platform, with a placeholder reminder "Post draft in progress. Tap to resume." (Captioned by AI)1206×498 92.2 KB

1 Like
53

Hello :wave: Thanks for the report! Here is a fix and also makes some other improvements: FIX: Issue with flashing on iOS devices, prevents closing on scroll-lock too and fixes the reply draft position by VaperinaDEV · Pull Request #5 · VaperinaDEV/f-nav-for-mobile · GitHub

1 Like
54

Hello @don can we add text like home, notification, message under the icons in the component?

1 Like
55

Hello @ozkn :wave:

Thanks, I’ve just merged an update to support this feature: FEATURE: Show tab label by VaperinaDEV · Pull Request #6 · VaperinaDEV/f-nav-for-mobile · GitHub

A new theme setting has been added: f_nav_show_labels

Tab labels are now displayed based on the name values from the f_nav_tabs setting.

Screenshot 2025-05-10 at 21.21.55
Screenshot 2025-05-10 at 21.21.55735×320 15.8 KB

Screenshot 2025-05-10 at 21.07.22

On topic pages, the “Home” tab label is replaced with the js.back_button key.

Screenshot 2025-05-10 at 21.08.23

2 Likes
56

thanks @don

1 Like
57

Hi @Don I notice I can’t change the message icon, it’s hardcoded, is there any work around for that so I can change the button icon to something else?

2 Likes
58

This theme component is awesome, thanks! It seems to be not ready for Horizon yet?

fnav-horizon-double-icons
fnav-horizon-double-icons1090×328 53.7 KB

Tried to hide that icon in many ways and nothing worked. It appears only on mobile, not in desktop.

[EDIT] Already did it as follows:

// Hide user menu panel on mobile
.d-header-icons .header-dropdown-toggle [data-identifier="avatar-profile"] {
display: none !important;
}

I prefer the navbar fixed, so I tweaked a bit the component:

// Fix navigation (desktop on mobile) on scrolling
body.f-nav-hidden:not(
    .archetype-regular,
    .archetype-private_message,
    .has-full-page-chat
  )
  .list-controls {
  position: static;
}

That prevents the scroll auto-hiding feature for those who are looking the same.

59

Was looking for something similar but for the header actually.

60

In case someone needs sticky header here it is:

```

body.f-nav-hidden .d-header-wrap {
animation: none !important;
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important; // ensure it stays above other elements
}

```

2 Likes
62

Do you have this issue: when I add a chat, the position of the “number” in the received message is incorrect?
image