# Mobile topnav with long category and subcategory

**URL:** <https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298>\
**Category:** UX\
**Created:** [2015年七月22日 13:41 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298 "2015-07-22T13:41:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)\
**Post date:** [2015年七月22日 13:41 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/1 "2015-07-22T13:41:19Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/5/3/533e9c3735defb1d69349b67f53d6291f3f350f9.png) ![](https://global.discourse-cdn.com/meta/original/3X/c/2/c28bdcb7ad7a7800916bf98e63ba82b83885f0ec.png) ![](https://global.discourse-cdn.com/meta/original/3X/3/c/3c8dee80d6df55ee42fea84e79e34020c9b92927.png)

---

<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:** [2015年七月23日 06:12 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/2 "2015-07-23T06:12:59Z")

</div>

Wait, why does tagging cause this?

---

<div class="post-metadata">

**Author:** ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)\
**Post date:** [2015年七月23日 06:14 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/3 "2015-07-23T06:14:05Z")

</div>

Because it adds an additional dropdown. 😺

---

<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:** [2015年七月23日 06:15 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/4 "2015-07-23T06:15:22Z")

</div>

That’s not tagging, that is a subcategory.

---

<div class="post-metadata">

**Author:** ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)\
**Post date:** [2015年七月23日 06:15 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/5 "2015-07-23T06:15:56Z")

</div>

O opps 😲 I’ll update the title

---

<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:** [2015年七月23日 06:17 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/6 "2015-07-23T06:17:45Z")

</div>

There isn’t any misalignment – there simply isn’t room to display all the controls, so _something_ has to get pushed down to the next line.

Not really clear what you are proposing here. Try entering this:

- Very Long Category Name
  - Very Long Subcategory Name

You’re gonna have issues regardless. We do cap this with `max-width` and use ellipsis, that’s about all we can do..

---

<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:** [2015年七月23日 06:24 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/7 "2015-07-23T06:24:17Z")

</div>

Possibly we could change “+ New Topic” to “+ New” on mobile

---

<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:** [2015年七月23日 06:24 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/8 "2015-07-23T06:24:50Z")

</div>

Or just + perhaps. That might be a good change if you are itching to make one @tgxworld.

---

<div class="post-metadata">

**Author:** ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)\
**Post date:** [2015年七月23日 06:25 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/9 "2015-07-23T06:25:33Z")

</div>

> [@codinghorror](#):
>
> There isn’t any misalignment – there simply isn’t room to display all the controls, so something has to get pushed down to the next line.

Not sure what the right term for it is. 😄

I’ll look into a fix for this soon. Probably try out ellipsis.

---

<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:** [2015年七月23日 06:33 UTC](https://meta.discourse.org/t/mobile-topnav-with-long-category-and-subcategory/31298/10 "2015-07-23T06:33:22Z")

</div>

Less words is good, if you can so changing new topic to + that does not require 🔍 to click it would be awesome and generally help the front page.