Mobile Header expanding after tapping hamburger menu

[McBlu (Blu McCormick)]

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.

[Vaping_Community]

@joffreyjaffeux 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.

[Vaping_Community]

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

[McBlu (Blu McCormick)]

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

[tshenry (Taylor)]

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.

[tshenry (Taylor)]

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

[McBlu (Blu McCormick)]

@tshenry

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.

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

[awesomerobot (Kris)]

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

[Vaping_Community]

That works! Thankyou very much

[McBlu (Blu McCormick)]

@awesomerobot

.hamburger-panel {
width: 0;
}

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

[tshenry (Taylor)]

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

[Vaping_Community]

The problem is back for me…

On the user profile drop down

@awesomerobot Fixed

.hamburger-panel, .menu-panel {
     width: 0px;
}

[Vaping_Community]

The full fix for this is: @awesomerobot

.hamburger-panel, .menu-panel {
    width: 0px;
    display: inline-block !important;
}