F NAV - モバイル ナビゲーション タブ

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

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

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:

There’s yet the hamburger icon space

「いいね!」 2

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

「いいね!」 3

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

Hello :wave:

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

Like here on Meta:

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

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

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;
    }
  }
}

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

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

「いいね!」 1

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

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

「いいね!」 1

Okay thanks for the extra details I am in Android

「いいね!」 1


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

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

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.

「いいね!」 4

Not working on latest Discourse.

Can you clarify it?

Oh okay, got it. Thanks for the report. The scrollTop mixin was removed from the core, and that caused the issue. But we don’t actually use it, so it probably just got left in there by accident. Fixed it here: FIX: ScrollTop mixin removed from core · VaperinaDEV/f-nav-for-mobile@6ec554c · GitHub

Please update the component.

「いいね!」 3