# En-tête mobile qui s'élargit après avoir appuyé sur le menu hamburger

**URL:** https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884
**Category:** Support
**Created:** [Mars 1, 2018, 2:19 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884 "2018-03-01T14:19:02Z")
**Posts on this page:** 14
**Page:** 3

<div class="post-metadata">

### Author: ![McBlu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcblu/32/91128_2.png) [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [Mars 1, 2018, 4:16 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/42 "2018-03-01T16:16:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [Mars 1, 2018, 4:18 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/43 "2018-03-01T16:18:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [Mars 1, 2018, 4:32 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/44 "2018-03-01T16:32:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![McBlu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcblu/32/91128_2.png) [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [Mars 2, 2018, 4:47 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/46 "2018-03-02T04:47:39Z")

</div>

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

[https://global.discourse-cdn.com/meta/original/3X/f/2/f2f5769325f0e103457fac2e76badb4ba9539b47.MP4](https://global.discourse-cdn.com/meta/original/3X/f/2/f2f5769325f0e103457fac2e76badb4ba9539b47.MP4)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Mars 2, 2018, 5:26 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/47 "2018-03-02T05:26:49Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Mars 2, 2018, 5:34 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/48 "2018-03-02T05:34:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![McBlu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcblu/32/91128_2.png) [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [Mars 2, 2018, 4:33 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/49 "2018-03-02T16:33:16Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Mars 2, 2018, 7:17 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/50 "2018-03-02T19:17:22Z")

</div>

I believe a fix I just pushed should cover this:

[https://github.com/discourse/discourse/commit/70acfa47d7e36a2a2798d9c2042c0aadd1130ea0](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:

```CSS
 .hamburger-panel {
    width: 0; 
  }

```

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [Mars 2, 2018, 7:53 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/51 "2018-03-02T19:53:39Z")

</div>

That works! Thankyou very much 😄

---

<div class="post-metadata">

### Author: ![McBlu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcblu/32/91128_2.png) [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [Mars 2, 2018, 7:56 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/52 "2018-03-02T19:56:45Z")

</div>

> [@awesomerobot](#):
>
> .hamburger-panel {  
> width: 0;  
> }

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

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [Mars 3, 2018, 2:38 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/53 "2018-03-03T02:38:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [Mars 3, 2018, 6:50 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/54 "2018-03-03T18:50:34Z")

</div>

The problem is back for me..

On the user profile drop down

@awesomerobot Fixed

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

```

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [Mars 4, 2018, 10:48 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/55 "2018-03-04T10:48:06Z")

</div>

The full fix for this is: @awesomerobot

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

```

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [Juin 8, 2024, 12:37 UTC](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884/56 "2024-06-08T12:37:46Z")

</div>

Ce sujet a été automatiquement fermé après 2290 jours. Les nouvelles réponses ne sont plus autorisées.

[Page précédente](https://meta.discourse.org/t/mobile-header-expanding-after-tapping-hamburger-menu/81884.md?page=2)
