Mobile Header expanding after tapping hamburger menu

support
42

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 Like
43

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

44

Iā€™ve just removed my top menu on mobile and put it on desktop ONLY, nothing else I can do reallyā€¦

1 Like
46

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

47

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 Likes
48

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

5 Likes
49

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

1 Like
50

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 Likes
51

That works! Thankyou very much :smile:

4 Likes
52

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

6 Likes
53

@awesomerobotā€™s solution was much simpler than mine was! Glad itā€™s fixed now!

8 Likes
54

The problem is back for meā€¦

On the user profile drop down

@awesomerobot Fixed

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

The full fix for this is: @awesomerobot

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