Brand header mobile menu doesn't fully expand until window resize

We’re having a problem where the brand header menu on the upper left only partially expands on mobile when tapped. We have it set to not display the bar on mobile. If I just tap the hamburger menu it looks like this.

But if I then resize the window in any direction it expands fully and shows all the sub-links.

How do I get it to expand fully when tapped without needed a window resize?

I’ve found that on our forum when I just click the hamburger menu, the “slide-in” class is not being added to the “menu-panel” div.

But then as soon as I resize the window, it does get added and the menu works correctly.

As far as I can tell menu-panel and slide-in aren’t coming from our theme. But it seems like slide-in is important to make it work. Why would slide-in not get added when the menu is opened? Why would resizing the browser window make it suddenly get added?

Here’s how I see this component on mobile with no other themes installed:

image

I didn’t have to resize to get this, and when I resize I don’t get the slide-in class at all…

It looks like you’re on Discourse 3.2, rather than the current version 3.3. There are updates to this component that rely on version 3.3, so you’re not getting those at the moment.

It’s possible that updating Discourse and the component will fix all of your issues, but if not there may be a conflict with other customizations.

2 Likes

You’re right, we’re using Discourse 3.2.3. I thought I understood from this post that the problem also exists in version 3.3 but yours looks good. I’ll check if it’s possible for us to upgrade to 3.3, or maybe install an older version of the brand-header component.

Is it published somewhere that the component requires version 3.3? I don’t see that anywhere.

Do you happen to know when the updates were made that depend on 3.3? Or what the last version that works with 3.2 might be?

1 Like

It doesn’t explicitly require it, but sometimes when making updates we know rely on a newer Discourse feature, we’ll pin the theme component to an older Discourse version which will stop it from receiving incompatible updates.

When this is done the details are in a .discourse-compatibility file:

In this case you’d be pinned to the commit with hash: 12e6f76e0508b262517efd5db2d7feca261dff86, which is DEV: move widgets to dedicated files, cleanup (#28) · discourse/discourse-brand-header@12e6f76 · GitHub

Since that change, the component’s code has been entirely refactored due to changes with how the header in Discourse works.

I think this highlights a good issue for us to consider though, this information is fairly buried and technical. Perhaps we can add some message on the admin panel that says some components have stopped receiving updates because they require features from the latest version of Discourse.

2 Likes

I forked the component, rolled it back to commit 12e6f76, and installed that on our forum but the problem still exists. Shouldn’t that fix it it?

No, that’s the commit you’re already pinned to, you’re missing everything that comes after.

1 Like

I must be misunderstanding something. We didn’t used to have this problem. At some point the problem occurred because the component made changes that require Discourse 3.3 and we updated the component but we are still using Discourse 3.2. Is that correct? If so, wouldn’t the simplest solution be to roll back to the last version of the component that works with Discourse 3.2?

The component wouldn’t have received those changes for 3.3. When a component is pinned to a specific Discourse version, it’s essentially frozen in its current state until Discourse is updated.

So you shouldn’t need to do this… pinning should make it automatically remain on the latest compatible version, but it’s possible this bug already existed in the version of the component you’re using.

1 Like

I understand now… clever. Is it safe to assume there won’t be any effort by the maintainer to make the component work properly with 3.2?

I made a copy of the forum and upgraded to 3.3 and yes, that does fix the problem. I’m checking with our admin to see if it’s possible to upgrade to 3.3 on the live forum.

Thanks!

1 Like

Yeah unfortunately we only have the bandwidth to maintain theme components on the latest version of Discourse so this can happen with older versions from time to time.

We were finally able to update the live forum to 3.3 and it suddenly works. Thanks again!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.