# Moving category logo above topnav

**URL:** https://meta.discourse.org/t/moving-category-logo-above-topnav/42539
**Category:** UX
**Created:** [14.Апрель.2016 07:40:57 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539 "2016-04-14T07:40:57Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![probus](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@probus](https://meta.discourse.org/u/probus)
#### Post date: [14.Апрель.2016 07:40:57 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/1 "2016-04-14T07:40:57Z")

</div>

I’d like to utilize the category description and colors a bit better on our next design iteration and have been playing around with a couple of ideas.

I’d like to move the category logo&description above the “latest/new/unread..” navigation and make it 100% screen width. You can see [Flarum](https://discuss.flarum.org/t/post-tests-here) doing similar thing and to me it looks much better than what we have out of the box.

Has anyone done anything like that for Discourse? What would be the best way, a new plugin outlet perhaps?

---

<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: [14.Апрель.2016 10:26:14 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/2 "2016-04-14T10:26:14Z")

</div>

Can you post a quick cropped screenshot of what exactly you mean?

---

<div class="post-metadata">

### Author: ![probus](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@probus](https://meta.discourse.org/u/probus)
#### Post date: [14.Апрель.2016 11:18:57 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/3 "2016-04-14T11:18:57Z")

</div>

Discourse has first the navigation, then description, then content:

 ![](https://global.discourse-cdn.com/meta/original/3X/5/6/5670c34945fa460e359678efd314bac002a4b0db.png)

Flarum has first the title&description, then navigation (e.g. “latest”), then content:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/e/7e2916cce90d887148db6aae15e5e83291121695.png)

Uploading…

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [14.Апрель.2016 18:11:29 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/4 "2016-04-14T18:11:29Z")

</div>

Sorry, it must be me.  
When I first saw this I thought I must have been too tired to understand what was meant.  
Now I’m thinking I must not be awake enough to understand.

Can you annotate the images with arrows or circles or something. Or better yet use your dev tools to move things to where you think would be better and post a screen shot of that.

---

<div class="post-metadata">

### Author: ![probus](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@probus](https://meta.discourse.org/u/probus)
#### Post date: [15.Апрель.2016 13:28:07 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/5 "2016-04-15T13:28:07Z")

</div>

Turn this:

 ![](https://global.discourse-cdn.com/meta/original/3X/5/6/5670c34945fa460e359678efd314bac002a4b0db.png)  
Into this:  
 ![](https://global.discourse-cdn.com/meta/original/3X/3/f/3fdb9fdcb312b501ba8fe3b0e9287cc3bbf6ed65.png)

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [15.Апрель.2016 13:41:05 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/6 "2016-04-15T13:41:05Z")

</div>

I like this idea … it moves the content-related UI elements closer to the content that they affect.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [15.Апрель.2016 18:50:35 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/7 "2016-04-15T18:50:35Z")

</div>

Thanks for the screen shots probus.

It looks like the first is using the discovery-list-container-top plugin outlet  
But you would prefer the Admin → Customize → CSS/HTML - Top location.

Only a matter of choice as to where to insert it into the DOM is it not?

 ![](https://global.discourse-cdn.com/meta/original/3X/9/4/9407be41ac8a96f9387533643e7994aa11972bf5.png)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [15.Апрель.2016 19:08:07 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/8 "2016-04-15T19:08:07Z")

</div>

> [@Mittineague](#):
>
> Only a matter of choice as to where to insert it into the DOM is it not?

![](https://global.discourse-cdn.com/meta/original/3X/e/a/ea81a0eed36f328c0f88f877bdc03b4db47a73b0.gif) Now I got it.  
You’re Talking about the Category Logo Image setting and the Category list pages, not Latest.

 ![](https://global.discourse-cdn.com/meta/original/3X/5/8/5848c49be962d4668b37b33b301955fceba53876.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: [15.Апрель.2016 19:20:07 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/9 "2016-04-15T19:20:07Z")

</div>

OK, I understand now. Not a bad idea; we’ll see!

---

<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: [18.Июнь.2016 01:56:49 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/10 "2016-06-18T01:56:49Z")

</div>

@techapj can you add this to your list? I support flipping this around per the above mockups.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [18.Июнь.2016 08:55:22 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/11 "2016-06-18T08:55:22Z")

</div>

Done via:

[https://github.com/discourse/discourse/commit/605a30254693ea59f42e6c241ee22febb61f7d2d](https://github.com/discourse/discourse/commit/605a30254693ea59f42e6c241ee22febb61f7d2d)

---

<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: [21.Июнь.2016 17:29:19 UTC](https://meta.discourse.org/t/moving-category-logo-above-topnav/42539/12 "2016-06-21T17:29:19Z")

</div>

This topic was automatically closed after 3 days. New replies are no longer allowed.
