Broken mobile styling of Header Categories Navbar

Bug
1

It appears that something (perhaps a change in the core?) has broken this component’s UX in mobile.

Specifically, when in the mobile breakpoint and a users clicks the chat icon to open the chat modal, the router sends the browser to /chat and thread categories are rendered as overlapped with the chat navigation.

Here’s two screenshots from two different users on different mobile browsers (Chrome and Safari), and I can also reproduce on Firefox for mobile.

6f829ebe3f9e1b4b3f3666491107914a37eda542
6f829ebe3f9e1b4b3f3666491107914a37eda5421170×580 61.2 KB

And the other:

Screensho.jpg
Screensho.jpg767×407 24.3 KB

For what it’s worth, I cannot reproduce this in a desktop browser that is in responsive design mode or mobile emulation mode. I think that has to do with the fact that the desktop doesn’t route to /chat when the chat icon is clicked on, but not 100% sure on that.

2 Likes
2

It happends on mobiles and on my forum only with chat.

IMG_2657
IMG_26571000×2167 150 KB

That screenshot is from OnePlus 7 Pro and the browser is duckduckgo. But same happends on iPhone/DiscourseHub.

That is more or less on the level old friend came to visit for holidays :smirk: because this has bothered earlier too.

1 Like
3

Could this be caused by the back to forum link? I don’t recall that being in earlier versions of the mobile breakpoint for Discourse but I could be wrong on that.

4

Could be. Something similar has happened earlier when above cat nav came new elements.

1 Like
5

Raising this with the team, thanks for the report @BeefofAges!

2 Likes
6

@BeefofAges I just merged a fix for this theme, if you update it, itshould now work correctly thanks.

We decided it was not necessary to have this navbar when under a chat page.

3 Likes
7

Update deployed and looks good. Thanks for the quick turnaround!

1 Like