# A wider hamburger menu?

**URL:** https://meta.discourse.org/t/a-wider-hamburger-menu/109231
**Category:** Feature
**Created:** [February 15, 2019, 10:21am UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231 "2019-02-15T10:21:49Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![ChrisBeach](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrisbeach/32/214628_2.png) [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [February 15, 2019, 10:21am UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/1 "2019-02-15T10:21:49Z")

</div>

On desktop, I’m finding menu items are getting truncated due to the narrow width of the menu:

 ![32](https://global.discourse-cdn.com/meta/original/3X/6/c/6c2547420f96aafe5e72642d3da832f183525c3f.jpeg)

Item text is truncated with elipses (as they exceed the CSS-defined `max-width`):

 ![02](https://global.discourse-cdn.com/meta/original/3X/1/f/1f41fab9b16132630552a20525bd1d72b8af1ec5.png)

* * *

I considered widening the menu using CSS, but I notice the menu’s style is governed by the DOM:

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/8/d851362e344b3a7413972e005cbc8c1f02bad5e6.png)

Any chance the defaults could be raised? The width seems a bit restrictive at the moment, given the available width of the browser window.

---

<div class="post-metadata">

### Author: ![ChrisBeach](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrisbeach/32/214628_2.png) [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [February 19, 2019, 10:25pm UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/2 "2019-02-19T22:25:50Z")

</div>

@codinghorror @sam I’ve created a PR for your consideration:

[https://github.com/discourse/discourse/pull/7032](https://github.com/discourse/discourse/pull/7032)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [February 19, 2019, 10:49pm UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/3 "2019-02-19T22:49:59Z")

</div>

Probably OK if you think so @sam

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [February 20, 2019, 2:58am UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/4 "2019-02-20T02:58:54Z")

</div>

Probably fine, will leave it to @awesomerobot to merge as he is far more aware of carious side effects this could have.

---

<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: [February 20, 2019, 3:09am UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/6 "2019-02-20T03:09:21Z")

</div>

I’d prefer a smaller bump to 320px to start with, which would match the width of the notification dropdown… 360 feels like it introduces a lot of space to the non-category items. I think this looks good to merge otherwise.

For reference:

300px (current width)

 ![24%20PM](https://global.discourse-cdn.com/meta/original/3X/2/0/201de35b292f42f2c383ed801dcafa6df44a7055.png)

320px

 ![02%20PM](https://global.discourse-cdn.com/meta/original/3X/d/c/dc714a716b302ae864885551bfa0d5370a1f8a30.png)

360px

 ![13%20PM](https://global.discourse-cdn.com/meta/original/3X/f/9/f9990472483ebe18fdd079fab7bfc4cf7a60c966.png)

---

<div class="post-metadata">

### Author: ![ChrisBeach](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrisbeach/32/214628_2.png) [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [February 20, 2019, 8:17am UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/7 "2019-02-20T08:17:19Z")

</div>

@awesomerobot thanks for taking the time to look into this and to consider the PR.

Just one minor point of note - in those comparisons it looks like the category name max-widths weren’t increased in the 360px version.

If the category name max-widths are increased along with the menu max-width, it helps avoid the truncation of category names.

To me, the truncation of category names is a serious UX problem which unfortunately is not solved by adding only an extra 20px to the menu width

---

<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: [February 22, 2019, 3:02am UTC](https://meta.discourse.org/t/a-wider-hamburger-menu/109231/8 "2019-02-22T03:02:59Z")

</div>

Right I understand, it’s just that 360 feels enormous here… to the point where I’d consider redesigning the menu to make better use of that space (which I’m not opposed too, it’s just not a high priority).

 ![23%20PM](https://global.discourse-cdn.com/meta/original/3X/c/6/c6781abca4eec6f69551b7d97f1ed063748ed605.png)

For now I’ve made the change for a small bump to 320, and I’ll keep the truncation in mind for future updates.
