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.