F NAV - Mobile Navigation Tabs

Theme component
22

Thank you, Don. This is the answer I was looking for. :+1:

However, I need to check in detail how to enable this setting.

2 Likes
23

You can find the reduce motion in your phone accessibility settings. It’s probably turned on now, so if you turn it off then the menu outside click will work. But probably that is enabled with good reason and easier to close the menu with swipe. :slightly_smiling_face:

3 Likes
24

I love it, Don

But it looks like there’s a problem with fkb pro theme if you want to hide the hamburger menu, like here and here:

The image appears to be part of a user interface with a menu showing buttons and a profile picture, featuring a dark theme with icons and a watermark text. (Legendado por IA)
The image appears to be part of a user interface with a menu showing buttons and a profile picture, featuring a dark theme with icons and a watermark text. (Legendado por IA)651×322 32.3 KB

There’s yet the hamburger icon space

2 Likes
25

Hello :wave:
Thanks for the report I’ve merged a fix for this in the FKB Pro - Social theme :slightly_smiling_face:

3 Likes
26

Bug report: On 3.4.0beta, the chat icon is not hidden once you switch to chat:

CleanShot 2025-02-18 at 14.56.01@2x
CleanShot 2025-02-18 at 14.56.01@2x836×1390 32.5 KB

27

Hello :wave:

That’s by design. We hide the f nav on /chat pages and use the default chat header.

Like here on Meta:

The screenshot shows a messaging app interface with a chat channel named "lounge" and a profile picture with a cap icon at the top right. (Captioned by AI)
The screenshot shows a messaging app interface with a chat channel named "lounge" and a profile picture with a cap icon at the top right. (Captioned by AI)750×838 51.3 KB

28

Ok got it. Then only way would be to manually hide it via CSS?

29

You can hide it completely with CSS.

Mobile/CSS

.d-header-icons {
  .header-dropdown-toggle {
    &.chat-header-icon {
      display: none;
    }
  }
}

Note: When you are in a channel this is the only place where you can see the chat notifications.

1 Like
30

Would it be possible to remove the chat icon, but keeping the new message bubble indicator?

Edit: Managed myself by adding a svg

.d-header-icons {
  .header-dropdown-toggle {
    &.chat-header-icon a svg {
      display: none;
    }
  }
}
31

Hello @don, can I add text such as homepage, menu, etc. under the icons?

32

I have a problem with the messages - they don’t load.

The image shows a social media post by a user named Justine with a photo of hands holding each other, along with text in German, and a circle highlighting an envelope icon. (Beschriftet durch KI)
The image shows a social media post by a user named Justine with a photo of hands holding each other, along with text in German, and a circle highlighting an envelope icon. (Beschriftet durch KI)1179×1180 133 KB

This image shows a mobile app notification panel with information about an upcoming ADHS SHG appointment scheduled for Monday, 08.05.25, with a time reminder set for 19:30. (Beschriftet durch KI)
This image shows a mobile app notification panel with information about an upcoming ADHS SHG appointment scheduled for Monday, 08.05.25, with a time reminder set for 19:30. (Beschriftet durch KI)1179×2556 66.5 KB

1 Like
33

Can you share some setup details? I am on Tests-passed and messages is working correctly

The image shows a notification screen displaying multiple "New advice on your site dashboard" messages from the game "Xenoblade Chronicles Definitive Edition". (Captioned by AI)
The image shows a notification screen displaying multiple "New advice on your site dashboard" messages from the game "Xenoblade Chronicles Definitive Edition". (Captioned by AI)864×1920 171 KB

34

On the iPhone in Safari it does not work, in the Chrome browser it does.

1 Like
35

Okay thanks for the extra details I am in Android

1 Like
36

The image shows a screenshot of a social media profile with a status line and categories list, timestamped at 21:30 and indicating the last post was made 11 hours ago. (由 AI 生成标题)
The image shows a screenshot of a social media profile with a status line and categories list, timestamped at 21:30 and indicating the last post was made 11 hours ago. (由 AI 生成标题)1080×524 53.9 KB

This image is a screenshot of a Discord server's community chat interface, showing various community posts under different categories such as "Support," "Site Management," and "Developers" with their respective comments and likes. (由 AI 生成标题)
This image is a screenshot of a Discord server's community chat interface, showing various community posts under different categories such as "Support," "Site Management," and "Developers" with their respective comments and likes. (由 AI 生成标题)1080×2400 126 KB

When using the Horizon theme, a component on the topic list is making the top area (logo/elements area) blank on scroll.

37

Unfortunately I can’t repro it.

It seems it’s not too compatible with the header changes. I will check what’s happens in the Horizon.

3 Likes
38

Oh ok I think I see what’s happening here. The list-controls is sticky in Horizon when you scroll down and the F NAV is hide the header by default at the same time. So this cause this gap you shared on your screenshot.

This little CSS snippet should work with Horizon theme.

It will stick it to the top of the page when you scroll down instead of the header height.

Mobile / CSS

body.f-nav-hidden {
  .list-controls {
    top: 0;
  }
}

For the future, it maybe a good idea to add a setting to handle the header appearance.

3 Likes