F NAV - Mobile Navigation Tabs

Theme component
63

After the new update, this isn’t working anymore. @Don did you made some relevant changes or something?

64

Hello :waving_hand: 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

65

Yes, it started working all again. Some other theme components were causing the issue.

1 Like
67

Hello :waving_hand: Hmm I cannot reproduce this… what device and browser you use?

68

Hi Don, thank you for reply.
It’s very strange. Below are several browsers I tested, and the same phenomenon occurred. :sweat_smile:

Edge browse on PC

image
image354×105 5.64 KB

Iphone Discourse Hub App
image
image354×105 5.64 KB

Iphone Safari
A simple row of grey and green icons representing a home, menu, notifications with a count of one, and a person is displayed on a white background. (Captioned by AI)
A simple row of grey and green icons representing a home, menu, notifications with a count of one, and a person is displayed on a white background. (Captioned by AI)1170×197 10.4 KB

Andriod Edge
A minimalist interface displays navigation icons, including back, options, a highlighted speech bubble, and a user profile, all in a monochrome colour scheme with a green accent. (Captioned by AI)
A minimalist interface displays navigation icons, including back, options, a highlighted speech bubble, and a user profile, all in a monochrome colour scheme with a green accent. (Captioned by AI)954×150 12.5 KB

70

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