Mobile Header expanding after tapping hamburger menu

I almost think since custom menus are so popular it would be nice to have more options built into the header that can be changed in settings and would be checked against with updates. The customer headers I am seeing people build are all pretty similar.

Yeah, me too. My after header includes a menu that ties the forum into the rest of the website.

إعجاب واحد (1)

@j.jaffeux Can we get this reopened as a bug please, adding custom HTML to header is breaking the hamburger and user profile drop downs on mobile.

I’ve just removed my top menu on mobile and put it on desktop ONLY, nothing else I can do really…

إعجاب واحد (1)

For staff looking into this, this is what happens to my very simple header:

I might have a fix for this. I ran into the issue a week or two ago and wrote up some CSS that appears to fix it. I’d like to do a little more testing for bad side effects before I post it.

I am pretty sure something changed in core Discourse recently that led to the problem since I definitely remember a time when it wasn’t happening. Unfortunately, this type of thing happens with add-ons. The Discourse team can’t be expected to test every change against every customization that’s out there.

Anyway, I’ll try to get the CSS posted this weekend if a solution isn’t posted in the mean time.

5 إعجابات

Ah, another really important note I had on this is that it is a Safari only issue.

5 إعجابات

Agreed. Looking forward to seeing the code. Thanks for posting.

إعجاب واحد (1)

I believe a fix I just pushed should cover this:

https://github.com/discourse/discourse/commit/70acfa47d7e36a2a2798d9c2042c0aadd1130ea0

I had updated the way the layout of the menu works a bit (added flexbox, which helps accommodate font scaling)… and it seems like Safari was including the width of the expanded hamburger menu where it shouldn’t have been. You can try this fix out on your sites by adding this CSS to your customization:

 .hamburger-panel {
    width: 0; 
  }
11 إعجابًا

That works! Thankyou very much :smile:

4 إعجابات

Woohooooo. That code fixed the problem. Thank you so much, Kris.

6 إعجابات

@awesomerobot’s solution was much simpler than mine was! Glad it’s fixed now!

8 إعجابات

The problem is back for me…

On the user profile drop down

@awesomerobot Fixed

.hamburger-panel, .menu-panel {
     width: 0px;
}
إعجاب واحد (1)

The full fix for this is: @awesomerobot

.hamburger-panel, .menu-panel {
    width: 0px;
    display: inline-block !important;
}
3 إعجابات

This topic was automatically closed after 2290 days. New replies are no longer allowed.